跨多個元素的jQuery動畫隊列

Question

此問題與this one about animation queues類似，但該線程中的答案非常具體且不易泛化。

<div class="alert">Login successful</div> 
<div class="alert">You have new messages waiting</div> 

有可能是在任何數量的警報：

在我的web應用程序，消息是通過用class="alert"例如輸出div回報給用戶（信息框，錯誤&警告等）頁面，取決於用戶的操作。

我想要的是使用jQuery動畫順序顯示每個警報框：一旦一個動畫結束，下一個動畫開始。

在其他問題的答案說，使用像一個回調：

$('#Div1').slideDown('fast', function(){ 
    $('#Div2').slideDown('fast'); 
}); 

，只是如果有div的動畫數目不詳的將無法工作。任何人都知道一種方法來實現這一目標？

Answer 1

我想出了一個解決方案，但我得到一個偷偷摸摸的人，誰知道更多關於JS關閉可能有一些指針對我來說。

nextAnim($('.alert')); 

function nextAnim($alerts) { 
    $alerts 
     .eq(0) // get the first element 
     .show("slow", 
      function() { 
       nextAnim($alerts.slice(1)); // slice off the first element 
      } 
     ) 
    ; 
} 

Answer 2

這是很容易設置：

// Hide all alert DIVs, then show them one at a time 
$(function() 
{ 
    var alerts = $(".alert").hide(); 
    var currentAlert = 0; 
    function nextAlert() 
    { 
     alerts.eq(currentAlert).slideDown('fast', nextAlert); 
     ++currentAlert; 
    } 
    nextAlert(); 
}); 

你也許可以做一個簡單的插件方法出這是否您將使用很多東西。