¿Cómo hacer que los efectos de jQuery se ejecuten en secuencia, no simultáneamente?

Question

¿Cómo puedo ejecutar dos efectos en jQuery en secuencia, no simultáneamente? Tome esta pieza de código, por ejemplo:

$("#show-projects").click(function() { 
    $(".page:visible").fadeOut("normal"); 
    $("#projects").fadeIn("normal"); 
}); 

El fadeOut y la fadeIn ejecutan simultáneamente, ¿cómo puedo hacer correr uno tras otro?

Answer 1

Puede proporcionar una devolución de llamada a las funciones de efectos que se ejecutan después de que se haya completado el efecto.

$("#show-projects").click(function() { 
    $(".page:visible").fadeOut("normal", function() { 
     $("#projects").fadeIn("normal"); 
    }); 
}); 

Answer 2

Lo que quiere es una cola.

Consulte la página de referencia http://api.jquery.com/queue/ para algunos ejemplos de trabajo.

Answer 3

¿Tiene que haber un objetivo? seguramente puede usar un objetivo aleatorio para poner en cola los eventos secuencialmente siempre que el objetivo sea constante ... a continuación, estoy usando el padre de un objetivo de animación para almacenar la cola.

//example of adding sequential effects through 
//event handlers and a jquery event trigger 
jQuery(document).unbind("bk_prompt_collapse.slide_up"); 
jQuery(document).bind("bk_prompt_collapse.slide_up" , function(e, j_obj) { 
    jQuery(j_obj).queue(function() { 
     //running our timed effect 
     jQuery(this).find('div').slideUp(400); 
     //adding a fill delay to the parent 
     jQuery(this).delay(400).dequeue(); 
    }); 
});      
//the last action removes the content from the dom 
//if its in the queue then it will fire sequentially 
jQuery(document).unbind("bk_prompt_collapse.last_action"); 
jQuery(document).bind("bk_prompt_collapse.last_action" , function(e, j_obj) { 
    jQuery(j_obj).queue(function() { 
     //Hot dog!! 
     jQuery(this).remove().dequeue(); 
    }); 
}); 
jQuery("tr.bk_removing_cart_row").trigger( 
    "bk_prompt_collapse" , 
    jQuery("tr.bk_removing_cart_row") 
); 

No

seguro de si es posible, pero parece que se podría unir .dequeue() para disparar cuando otro jquery desencadena el evento, en lugar de disparar en línea en mi ejemplo anterior? efectivamente detener una cola de animación?

Answer 4

$("#foo").fadeOut(300).delay(800).fadeIn(400);