Как заставить эффекты jQuery запускаться последовательно, а не одновременно?

Question

Как сделать так, чтобы два эффекта в jQuery запускались последовательно, а не одновременно? Возьмите этот кусок кода, например:

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

FadeOut и fadeIn запускаются одновременно, как мне заставить их работать один за другим?

Answer 1

Вы можете предоставить обратный вызов для функций эффектов, которые запускаются после завершения эффекта.

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

Answer 2

То, что вы хотите, это очередь.

Проверьте справочную страницу http://api.jquery.com/queue/ для некоторых рабочих примеров.

Answer 3

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

Answer 4

Должна ли быть цель? конечно, вы можете использовать случайную цель для последовательной очереди событий, если цель постоянна ... ниже я использую родительскую цель для анимации для хранения очереди.

//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") 
);

Не уверен, если это возможно, но похоже, что вы можете привязать .dequeue () к срабатыванию при запуске другого события jquery, вместо запуска inline в моем примере выше? эффективно остановить очередь анимации?