it-swarm-ru.tech

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

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

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

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

16
Justin Poliey

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

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

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

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

16
dbrien
$( "#foo" ).fadeOut( 300 ).delay( 800 ).fadeIn( 400 );
1
brilliantairic

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

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

0
niall.campbell