fadeout功能以及slidetoggle功能

Question

当我提交表单时，我的最后一项功能是：

$("#message").show().delay(5000).fadeOut();

这将显示我的感谢信息5秒钟，然后淡出“消息”div。

然后我尝试在它下面添加这个功能：

$("#slide_panel").slideToggle("slow");

因为我希望表格（位于#slide_panel div内）在5秒延迟后关闭/滑动....但是当我添加此功能时，它几乎就像5秒延迟不存在而且成功消息显示大约半秒钟，然后整个联系表格消失了它的假设。

我的代码出了什么问题？

$("#message").show().delay(5000).fadeOut();
$("#slide_panel").slideToggle("slow");

Answer 1

延迟功能仅适用于动画队列。您可以通过将回调函数传递给fadeOut()

来使用以下代码

   $("#message").show().delay(5000).fadeOut('fast', function(){
         $("#slide_panel").slideToggle("slow");
   });

现在，一旦动画完成，slideToggle将会运行。

Answer 2

您可以将代码更新为以下内容......

$("#message").show().delay(5000).fadeOut(function(){
    $("#slide_panel").slideToggle("slow");        
});

也就是说，在消息回调中添加slideToggle SlidePanel。有关更多提示，请查看http://jsfiddle.net/sf2Nr/1/

Answer 3

这与jQuery中动画函数的异步行为有关。

为了在slideToggle延迟后激活fadeOut，您必须从fadeOut的回调函数调用它，即：

$("#message").show().delay(5000).fadeOut(0, function() {
    $("#slide_panel").slideToggle("slow");
});