如何让 jQuery 效果按顺序运行，而不是同时运行？

Posted 2023-05-08

【中文标题】如何让 jQuery 效果按顺序运行，而不是同时运行？

【英文标题】：How to make jQuery effects run in sequence, not simultaneously?

【发布时间】：2010-09-09 15:53:11

【问题描述】：

如何在sequence 中运行 jQuery 中的两个效果，而不是同时运行？以这段代码为例：

$("#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/ 了解一些工作示例。

【讨论】：

.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 事件触发时触发，而不是在我上面的示例中触发内联？有效地停止动画队列？