jQuery 队列事件答案

【问题标题】：jQuery queue eventsjQuery 队列事件
【发布时间】：2009-02-18 14:49:03
【问题描述】：

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

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

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

谢谢

【问题讨论】：

标签： javascript jquery

【解决方案1】：

这对于快速动画来说通常已经足够了，但是如果你想将一些效果排队，你也可以像这样使用 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() 执行该函数。

请参阅docs 了解更多信息。

【讨论】：

【解决方案2】：

您可以通过使用回调来做到这一点。查看 jQuery docs。

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

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

【讨论】：

在问题中，fadeIn 大约是第二个 div。你的代码不应该在回调中有 'jQuery("#div2")' 吗？
谢谢！这帮助了我。当它这么简单时，我正忙着弄清楚队列！

【解决方案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();
});

【讨论】：