javascript - child - jquery selector

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

Question

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

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

El fadeOut y el fadeIn se ejecutan simultáneamente, ¿cómo hago que se ejecuten uno después del otro?

Answer 1

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

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

Answer 2

Lo que quieres 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 estoy seguro de si es posible, pero parece que podría vincular .dequeue () para disparar cuando se activa otro evento jquery, 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 );