jQuery code di animazione su più elementi

Question

Questa domanda è simile a this one about animation queues, ma le risposte in tale thread sono molto specifiche e non facilmente generalizzate.

Nella mia applicazione web, i messaggi sono riportati indietro per l'utente (caselle di informazioni, errori & avvertimenti, ecc) tramite emissione di un div con class="alert" esempio:

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

Ci potrebbe essere un qualsiasi numero di avvisi su un pagina, a seconda di cosa fa l'utente.

Quello che mi piacerebbe è usare un'animazione jQuery per mostrare sequenzialmente ciascuna casella di avviso: una volta terminata l'animazione, inizia la successiva.

Le risposte in che altra questione ha detto di utilizzare un callback come:

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

tranne che non funziona se c'è un numero imprecisato di div da animare. Qualcuno sa di un modo per raggiungere questo obiettivo?

Answer 1

Mi è venuta in mente una soluzione, anche se ottengo un vago sospetto che qualcuno che sa di più sulle chiusure di JS possa avere qualche suggerimento per me.

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

E 'abbastanza facile da configurare:

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

probabilmente si potrebbe fare un semplice metodo di plug-in fuori di questo, se si tratta di qualcosa che verrà usato un sacco.