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

Question

如何在jQuery中按顺序运行两个效果，而不是同时运行？就拿这一段代码，例如：

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

的淡出和淡入同时运行，我该如何让他们运行一个接一个？

Answer 1

你可以提供一个回调运行效果完成后的效果功能。

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

Answer 2

你想要的是一个队列。

退房http://api.jquery.com/queue/的参考页一些工作实例。

Answer 3

是否必须有目标？当然你可以使用随机目标来顺序排列事件，只要目标是恒定的...下面我使用动画目标的父节点来存储队列。

//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事件触发的，而不是在我上面的例子射击在线？有效地停止动画队列？

Answer 4

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