Colas de animación jQuery en varios elementos

Question

Esta pregunta es similar a this one about animation queues, pero las respuestas en ese hilo son muy específicas y no se generalizan fácilmente.

En mi aplicación web, los mensajes se informa al usuario (cuadros de información, errores & advertencias, etc.) mediante la salida de un div con class="alert" por ejemplo:

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

Puede haber cualquier número de alertas en una página, según lo que haga el usuario.

Lo que me gustaría es utilizar una animación jQuery para mostrar secuencialmente cada uno de los cuadros de alerta: una vez que termina una animación, comienza la siguiente.

Las respuestas en esta otra cuestión se dice que utilizar una devolución de llamada como:

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

la excepción de que no va a funcionar si hay un número desconocido de divs para animar. Alguien sabe de una manera de lograr esto?

Answer 1

Se me ocurrió una solución, aunque tengo la sospecha de que alguien que sabe más sobre el cierre de JS podría tener algunos consejos para mí.

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

Es bastante fácil de configurar:

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

que probablemente podría hacer que un método simple plugin fuera de este si es algo que va a utilizar una gran cantidad.