jQuery queue events

Question

Entonces, lo que quiero hacer es coordinar algunos efectos usando jQuery para algunas llamadas AJAX con las que estoy trabajando. Mi problema es que el fadeIn para el segundo div se dispara al mismo tiempo con el fadeOut para el primer div.

Esto podría aplicarse también a otros eventos, así que tengo curiosidad, ¿hay alguna manera de hacer que el lanzamiento de fadeId sea ÚNICO después de que se termine fadeOut?

jQuery("#div1").fadeOut("slow"); 
jQuery("#div2").fadeIn("slow"); 

Gracias

Answer 1

Usted puede hacer esto mediante el uso de una devolución de llamada. Consulte el jQuery docs.

jQuery("#div1").fadeOut("slow", function() { jQuery(this).fadeIn('slow'); }); 

Casi todos los efectos de jQuery toman una devolución de llamada para ejecutarse después de que el efecto finaliza.

Answer 2

que suele ser lo suficientemente bueno para una animación rápida, pero si quieres hacer cola una serie de efectos, también se puede utilizar la cola() y quitar de la cola() métodos de esta manera:

$("#div1").fadeOut(); 
$("#div1").queue(function() 
{ 
    $(this).fadeIn(); 
    $(this).dequeue(); 
}); 
$("#div").queue(function() 
{ 
    $(this).html("And now I'm sliding up. Wee!"); 
    $(this).slideUp("slow"); 
    $(this).dequeue(); 
}); 

Aquí, la cola() agrega una función a la cola del objeto (que no tiene que ser una animación) y dequeue() ejecuta esa función.

Consulte el docs para obtener más información.

Answer 3

Hubo algunos errores tipográficos en el ejemplo anterior que le impidió trabajar en Firefox, la versión corregida:

$("#div1").fadeOut(); 
$("#div1").queue(function() 
{ 
    $(this).fadeIn(); 
    $(this).dequeue(); 
}); 
$("#div").queue(function() 
{ 
    $(this).html("And now I'm sliding up. Wee!"); 
    $(this).slideUp("slow"); 
    $(this).dequeue(); 
});