jQuery队列事件

Question

所以我想要做的是协调一些使用jQuery的一些效果与我正在使用的一些AJAX调用。我的问题是，第二个div的淡入与第一个div的淡出同时发生。

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

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

感谢

Answer 1

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

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

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

Answer 2

这通常是足够好的一个快速的动画，但如果你要排队了一些效果，你也可以利用队列（）和出队（）方法是这样的：

$("#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(); 
}); 

这里，队列（）将函数添加到对象的队列（不一定是动画）并且dequeue（）执行该函数。

查看docs了解更多信息。

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(); 
});