javascript - jQuery - flashMessage 关闭按钮

Question

简短的问题：

$(document).ready(function(){
    $('.flash-notice .close').click(function(e){
        $('.flash-notice').fadeOut(250);
        e.preventDefault();
    });
        $('.flash-notice').delay(3000,).fadeOut(1000);

当我单击 Flash Notice 的 .close 元素时，没有任何反应。它只是在 3 秒后消失。如果我再次显示它并再次单击 .close ，它可以工作。

我想在盒子已经关闭时尝试关闭盒子有点搞砸了。

我该如何解决？

谢谢！

Answer 1

jQuery 使用特殊效果队列来存储动画和其他效果。每当您创建新效果时，它都会放在队列的末尾。在您的情况下，效果按以下顺序添加到队列中：

1. .delay(3000)
2. .fadeOut(1000)
3. .fadeOut(250)

因此，该.fadeOut(250)方法仅在前两个之后才执行。您的问题的解决方案是在调用之前清除效果队列.fadeOut(250)。以下作品：

$('.flash-notice .close').click(function(e){
    $('.flash-notice').stop().clearQueue().fadeOut(250);
    e.preventDefault();
});
$('.flash-notice').delay(3000).fadeOut(1000);

.stop()终止当前运行的效果 ( .delay(3000))，.clearQueue()从队列中移除所有尚未启动的效果。

Answer 2

        $('.flash-notice').delay(3000).fadeOut(1000);
        $('.flash-notice .close a').click(function(e){
            e.preventDefault();
            $('.flash-notice').stop().fadeOut(250);
        });

我忘记了 stop()