管理有多個元素的隊列

Question

我需要一個事件來啓動，然後停止/清除多個元素的動畫/動作隊列。我創建了此code基於此example。

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

DEMO HERE

祝您好運！