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

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

我忘记了停止（）

Answer 2

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()从队列中删除所有尚未开始的效果。