Question

Greetins，

我想使用滑动DIV来显示一些消息，例如“Profile Updated”。

这是我的代码。当我加载页面时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>

Answer 1

尝试在关闭div点击事件中添加.stop()。

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

jsfiddle示例

Answer 2

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

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

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

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

SlideDown Div带有关闭链接

2 个答案: