second - jquery first child

Colas de animación jQuery en múltiples elementos

Question

Esta pregunta es similar a esta sobre colas de animación , pero las respuestas en ese hilo son muy específicas y no se generalizan fácilmente.

En mi aplicación web, los mensajes se informan al usuario (cuadros de información, errores y advertencias, etc.) al generar un div con class="alert" por ejemplo:

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

Podría haber varias alertas en una página, según lo que haga el usuario.

Lo que me gustaría es usar 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 esa otra pregunta dicen usar una devolución de llamada como:

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

excepto que no funcionará si hay una cantidad desconocida de divs para animar. Alguien sabe de una manera de lograr esto?

Answer 1

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

Probablemente pueda hacer un método de complemento simple de esto si es algo que va a usar mucho.

Answer 2

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