淡出功能以及滑动切换功能

fadeout function along with slidetoggle function

本文关键字：功能 淡出      更新时间：2023-09-26

当我提交表单时，我的最后一个函数是:

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

这将显示我的感谢信息5秒，然后淡出"message"div。

然后我尝试在它下面添加这个函数:

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

因为我想要的形式(这是在#slide_paneldiv)关闭/滑动后5秒延迟....但是当我添加这个功能时，它几乎就像5秒延迟不存在一样，成功消息显示了大约半秒，然后整个联系人表单就像它应该的那样消失了。

我的代码有什么问题?

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

延迟函数仅适用于动画队列。您可以通过向fadeOut()

传递回调函数来使用以下代码
   $("#message").show().delay(5000).fadeOut('fast', function(){
         $("#slide_panel").slideToggle("slow");
   });

现在slideToggle将在动画完成后运行

您可以将代码更新如下…

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

即在消息回调中增加SlidePanel的slideToggle。更多想法，请查看http://jsfiddle.net/sf2Nr/1/

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

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

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