如何实现这个动画？答案

【问题标题】：How to implement this animation?如何实现这个动画？
【发布时间】：2012-10-24 14:31:17
【问题描述】：

我想在淘汰赛中实现这个简单的动画：

function scroll(back) {
    var scrollContainer = $('.scrollingContent');
    var newContent = $("<div class='content'></div>");
    var oldContent = scrollContainer.children().first();
    newContent.css("width", "50%");
    var contentSize = oldContent.width();
    var newContentColor = oldContent.css("background-color") == "rgb(255, 0, 0)" ? 
                                                                "green" : "red";
    newContent.css("backgroundColor", newContentColor);
    if (back) {
        newContent.css("margin-left", -contentSize);
        scrollContainer.prepend(newContent);
        newContent.animate({ "margin-left": 0 }, 600, 
        function () { oldContent.remove(); });
    } else {
        scrollContainer.append(newContent);
        oldContent.animate({ "margin-left": -contentSize }, 600, 
        function () { oldContent.remove(); });
    }
}

例子可以看这里：http://jsfiddle.net/VMx3j/106/

我已经阅读了很多关于自定义绑定的内容，但我仍然不明白如何正确地进行操作。

我只有两个想法。首先是创建一个 foreach 数组并绑定 afterRender、afterAdd 或 beforeRemove。但它会是正确的吗？我认为这种情况下的代码不够容易理解，而且很难改变任何东西。另一个想法是创建自定义绑定。但据我了解，这种方法仅适用于一个元素，我需要访问其中至少两个。

还要注意内容元素是模板（由这个动画不断改变）。

如果您对此有任何想法，请提供帮助。

【问题讨论】：

@mcpDESIGNS 我不能，因为之前的问题没有得到正确回答。

标签： jquery templates animation knockout.js

【解决方案1】：

我希望我明白你愿意做什么。这将是一个图片轮播，对吧？ :)

是的，为元素创建一个数组！

<script>
var $pics = $('#pics img'); // Get all img elements (this is an array/object !)
var i = 0;                  // Index starts with zero
var len = $pics.length;     // How many pictures we have

var $curr = $pics.eq(i);                       // Access current element
var $next = $pics.eq( i+1 == len ? 0 : i+1 );  // Access next element
var $prev = $pics.eq( i == 0 ? len-1 : i-1 );  // Access previous element
</script>

我相信现在你会知道该怎么做了。 :)

【讨论】：

【解决方案2】：

正确答案如下：

this.afterElementAdd = function(element) {
    if (element.nodeType === 1) {
        var el = $(element);
        if (el.next().length != 0 && el.prev().length == 0) {
            el.animate({ "margin-left": "0" }, 300, function () {
                self.contents.pop();
            });
        }
        else if (el.prev().length != 0 && el.next().length == 0) {
            el.prev().animate({ "margin-left": -el.width() }, 300, function () {
                self.contents.shift();
            });
        }
    }
};

【讨论】：