1

问候，

我想使用滑动 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>
4

2 回答 2

1

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

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

jsfiddle示例

于 2011-01-25T13:21:29.737 回答
0

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

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

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

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

于 2011-01-25T13:30:45.250 回答