带有关闭链接的 SlideDown div答案

【问题标题】：SlideDown Div with Close link带有关闭链接的 SlideDown div
【发布时间】：2011-01-25 21:40:09
【问题描述】：

问候，

我想使用滑动 DIV 来显示一些消息，例如“个人资料已更新”。

这是我的代码。当我加载页面并在几秒钟后消散（延迟）时，DIV 会向下滑动。但是我希望能够在超时之前通过链接关闭 DIV，但我无法将 SlideUp 附加到它...为什么？

    $("#message").hide();

     $("#message").slideToggle('slow', function() {
        $(this).delay(2000).slideToggle("slow");
     });

    $("#close").click(function() {
        $("#message").slideUp();
    });  
    });

    <div id="message" style="display:none; border: 3px solid #ccc; width: 500px; height: 30px; background: #eee;">
    A message goes here! <a id="close" href="#" style="float: right;">Close div</a>
    </div>

【问题讨论】：

标签： jquery user-interface slide slidedown slideup

【解决方案1】：

尝试将.stop() 添加到您的关闭 div 点击事件。

$("#close").click(function() {
    $("#message").stop().slideUp();
});

jsfiddle 示例

【讨论】：

实际上，您可能想使用 clearQueue 功能。它比停止更苛刻，但您可以确定动画会停止。 api.jquery.com/clearQueue

【解决方案2】：

这是因为动画在 jQuery 中排队。 slideUp 效果只会在延迟的slideToggle 效果完成后运行，届时您的<div> 元素将被隐藏。

正如@Mark 建议的那样，您需要调用stop() 来取消延迟，但您可能希望在其第一个参数中传递true：

$("#close").click(function() {
    $("#message").stop(true).slideUp("slow");
});

这样，<div> 元素上排队的所有效果都将被清除，而不仅仅是当前正在运行的效果。

【讨论】：