jQuery animasyon sıraları birden fazla öğede

Question

Bu soru this one about animation queues'a benzer, ancak bu konudaki yanıtlar çok spesifik ve kolayca genelleştirilemiyor. Bir ilişkili uyarı

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

var olabilir herhangi bir sayı: Benim web uygulamasında

, mesajlar class="alert" örneğin bir div çıkışı yaparak (bilgi kutuları, hataları & uyarılar, vs.) kullanıcıya geri bildirilmektedir Kullanıcı, ne yaptığına bağlı olarak.

İstediğim, uyarı kutularının her birini sırayla göstermek için jQuery animasyonu kullanmaktır: bir kez animasyon bittiğinde, sonraki işlem başlar. Canlandırmak div sayısı bilinmeyen varsa çalışmayacak dışında

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

: bu diğer Söz konusu

cevaplar gibi bir geri arama kullanmak söyledi. Bunu başarmanın bir yolu bilen var mı?

Answer 1

JS kapanışları hakkında daha fazla şey bilen birinin benim için birkaç işaretçiye sahip olabileceğine dair gizli bir şüphe duysam da bir çözüm buldum.

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

O kurmak kolaydır yeter: Eğer bir sürü kullanarak olacak bir şeyse

// 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(); 
}); 

Muhtemelen bu işten basit eklenti yöntemi yapabiliriz.