jQuery队列事件

所以我想要做的是使用jQuery为我正在使用的一些AJAX调用协调一些效果。 我的问题是第二个div的fadeIn与第一个div的fadeOut同时触发。

这也适用于其他事件，所以我很好奇，有没有办法在fadeOut完成后才能启动fadeId？

jQuery("#div1").fadeOut("slow"); jQuery("#div2").fadeIn("slow"); 

谢谢

Answer 1

您可以使用回调来完成此操作。 查看jQuery 文档 。

 jQuery("#div1").fadeOut("slow", function() { jQuery(this).fadeIn('slow'); }); 

几乎所有的jQuery效果都会在效果结束后执行回调。

Answer 2

这对于快速动画来说通常足够好但是如果你想排队一些效果，你也可以使用这样的queue（）和dequeue（）方法：

 $("#div1").fadeOut(); $("#div1").queue(function() { $(this).fadeIn(); $(this).dequeue(); }); $("#div").queue(function() { $(this).html("And now I'm sliding up. Wee!"); $(this).slideUp("slow"); $(this).dequeue(); }); 

这里，queue（）向对象的队列添加一个函数（不必是动画），dequeue（）执行该函数。

有关更多信息，请参阅文档 。

Answer 3

上面的例子中有一些拼写错误，导致它无法在Firefox中运行，修正后的版本：

 $("#div1").fadeOut(); $("#div1").queue(function() { $(this).fadeIn(); $(this).dequeue(); }); $("#div").queue(function() { $(this).html("And now I'm sliding up. Wee!"); $(this).slideUp("slow"); $(this).dequeue(); });