jquery - 管理具有多个元素的队列

Question

我需要一个事件来启动然后停止/清除多个元素的动画/动作队列。我根据这个例子创建了这段代码。

Answer 1

这应该给你一个很好的起点：

CSS

div {
    width:40px;
    height:40px;
}

#one {
    background:green;
}

#two {
    background: red;
}

​HTML

<button id="startQueue">Go</button>
<button id="clearQueue">Clear</button>

<div id="one" class="queueItem"></div>
<div id="two" class="queueItem"></div>​

JS

// Global Queue Array //
var queue = [];

// Start Queue //
$('#startQueue').bind('click', function(e){
    // Go through Each Element and Fade Out //
    $('.queueItem').each(function(i, $el){
        // Don't Delay First Element//
        if (i==0) {
            queue.push($(this).fadeOut(5000));
        } else {
            queue.push($(this).delay(5000*i).fadeOut(5000));
        }        
    });
});

// Stop / Clear Queue //
$('#clearQueue').bind('click', function(e){
    $.each(queue, function(i, $el){
        // Stop Animation and Reset Elements //
        $el.stop(true, true).css({
            display: 'block',
            opacity: '1'
        });

        // Clear Queue Array //
        queue = [];
    });
});

在这里演示

祝你好运！