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 = [];
    });
});

デモはこちら

幸運を！