我如何在sequence
中同时运行的jQuery中有两种效果?以这段代码为例:
$("#show-projects").click(function() {
$(".page:visible").fadeOut("normal");
$("#projects").fadeIn("normal");
});
fadeOut
和fadeIn
同时运行,如何使它们一个接一个地运行?
您可以提供对效果完成后运行的效果功能的回调。
$("#show-projects").click(function() {
$(".page:visible").fadeOut("normal", function() {
$("#projects").fadeIn("normal");
});
});
您想要的是一个队列。
查看参考页http://api.jquery.com/queue/中的一些工作示例。
$( "#foo" ).fadeOut( 300 ).delay( 800 ).fadeIn( 400 );
必须有一个目标吗?当然,只要目标是恒定的,就可以使用随机目标按顺序对事件进行排队...下面,我使用动画目标的父级来存储队列。
//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事件触发时触发,而不是在上面的示例中内联触发?有效地暂停动画队列?