0

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

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

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

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

4

2 回答 2

0

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

是的，为元素制作一个数组！

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

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

于 2012-10-24T15:18:15.377 回答
0

以下是正确答案：

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();
            });
        }
    }
};
于 2012-10-25T15:08:37.037 回答