Question

我有一些div元素，我想按顺序动态应用效果。这些div是从数组加载的，所以我不能像这样手动构建动画

$(segment).animate({
    opacity: 0
}, 100, function(){
    $(segment).animate({
        opacity: 1
    }, 100);
});

知道如何解决这个问题吗？其他人建议我使用jQuery队列，但这似乎只是为每个元素创建一个队列。

Answer 1

我没有使用过每个人都提到的jquery队列，所以只使用了一个数组和一个计时器。继承人：http://jsfiddle.net/5MyQU/1/

$(document).ready(function() {

    var __THEDIVS = [];

    $('div').each(function() {
        __THEDIVS.push($(this));
    })

    function animate() {
        $elem = __THEDIVS.pop();
        $elem.animate({
            'height': '100px'
        }, 200);
        if (__THEDIVS.length) {
            setTimeout(animate, 500);
        }
    }
    animate();
})

一些HTML

<div></div>
<div></div>
<div></div>
<div></div>

按顺序jQuery动画

1 个答案: