Question

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

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上绑定。但这是正确的吗？我认为这种情况下的代码不够理解，很难改变任何东西。另一个想法是创建自定义绑定。但据我所知，这种方法只适用于一个元素，我至少需要访问其中两个元素。

另请注意，内容元素是模板（通过此动画不断更改）。

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

Answer 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>

我相信现在你会知道该怎么做。：）

Answer 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();
            });
        }
    }
};

如何实现这个动画？

2 个答案: