Encadenamiento de animaciones jQuery que afectan a diferentes elementos

Question

$(document).ready(function() { 
    $("#div1").fadeIn("slow"); 
    $("#div2").delay(500).fadeIn("slow"); 
    $("#div3").delay(2000).fadeIn("slow"); 
    $("#div4").delay(8000).fadeIn("slow"); 
}); 

Esta es mi configuración actual, pero creo que esta no es la mejor manera de escribir esto. No puedo encontrar ejemplos sobre cómo escribirías esto mejor para el tiempo. ¿Alguna ayuda? Lo apreciaría.

También debo agregar que el tiempo de cada elemento no es constante.

Answer 1

fadeIn toma una devolución de llamada como su segundo parámetro. Esa devolución de llamada se ejecuta tan pronto como se completa la animación. Si desea que los elementos que se desvanecen en forma secuencial, se puede encadenar las devoluciones de llamada:

$(document).ready(function() { 
    $("#div1").fadeIn("slow", function(){ 
     $("#div2").fadeIn("slow", function(){ 
      $("#div3").fadeIn("slow", function(){ 
       $("#div4").fadeIn("slow"); 
      }); 
     }); 
    }); 
}); 

Esto podría ser reescrita usando una matriz de selectores y un solo método, si se daba la gana:

var chain = function(toAnimate, ix){ 
    if(toAnimate[ix]){ 
     $(toAnimate[ix]).fadeIn('slow', function(){ chain(toAnimate, ix + 1)}); 
    } 
}; 

$(document).ready(function(){ 
    chain(['#div1', '#div2', '#div3', '#div4'], 0); 
}); 

See this last one in action at JSBin.

Answer 2

Lo haré en un bucle, siempre y cuando esté hablando de un incremento constante (y siempre que aparezcan en el mismo orden en la página).

$("#div1,#div2,#div3,#div4").each(function(idx) { 
    $(this).delay(idx * 1000).fadeIn("slow"); 
}); 

Ejemplo:http://jsfiddle.net/km66t/

Este utiliza el índice aprobada por .each() para incrementar el retardo.

Así que estás haciendo con eficacia:

$("#div1").delay(0).fadeIn("slow"); 
$("#div2").delay(1000).fadeIn("slow"); 
$("#div3").delay(2000).fadeIn("slow"); 
$("#div4").delay(3000).fadeIn("slow"); 

---

EDIT: Para abordar el tema es de esperar en el comentario a continuación, en su lugar podría almacenar una matriz de los retrasos que desea utilizar, y acceda al índice apropiado de la matriz usando el índice de .each().

var delays = [0, 1000, 2000, 4000]; 

$("#div1,#div2,#div3,#div4").each(function(idx) { 
    $(this).delay(delays[ idx ]).fadeIn("slow"); 
}); 

Answer 3

No contento con las respuestas proporcionadas, esto es lo que solía:

var $steps = $('#div1, #div2, #div3'); 
    // iterate throught all of them 
    $.each($steps,function(index,value){ 
     $stage.fadeIn('slow', function(){ 
      // You can even do something after the an animation step is completed placing your code here. 
      // run the function again using a little introspection provided by javascript 
      arguments.callee 
     }); 
    }) 

De esta manera usted no tiene que declarar los retrasos.

Answer 4

Esto se puede hacer con elegancia desde 1,8:

$("div").toArray().map(function(e){ 
    return function(){ 
     return $(e).fadeIn(600).promise() 
    }; 
}).reduce(function(cur, next){ 
    return cur.then(next); 
}, $().promise()); 

http://jsfiddle.net/f3WzR/