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

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

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

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

Ответы

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

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

Ответ 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 в моем примере выше? эффективно останавливать очередь анимации?