基于Jquery的通知会自动重复

我使用以下CSS和HTML代码在事件发生时显示通知

HTML

 <div id="notification_wrapper">
            <div id="notification"></div>
 </div>

jQuery

$("#notification").text("A message tobe displayed").fadeIn().fadeOut(5000);

现在问题来了,

当我点击一个按钮执行上面的jQuery代码时，通知显示良好，并在5秒钟内消失。 但若我在这5秒钟内再次单击该按钮，第二个通知将在队列中排队，并在第一个通知在5秒钟后消失后再次显示通知

我希望它是这样运行的。 当我按下按钮时，通知应显示5秒钟。如果我在5秒内再次按下该按钮，第一个按钮将完全消失，新的按钮将出现

我正在为演示附上一把小提琴。

---

您需要检查动画是否正在运行：

var is_anim = false;
$(":button").click(function(){
    if(is_anim) return;
    is_anim = true;
    $("#notification").text("A message to display").fadeIn().fadeOut(5000, function(){
       is_anim = false;
    });
});

---

您需要在链的开头添加

.stop（true，true）

，以停止当前正在运行的动画

$("#notification").text("A message to display").stop(true, true).fadeIn().fadeOut(5000);

---

也许这对jquery

.stop（）

适用，如下所示：

var计数器=1；
$（“：按钮”）。单击（函数（）{
$（“#通知”）.text（'消息：'+计数器+'显示'）.stop（）.fadeIn（）.fadeOut（5000）；
计数器++；
});
#通知#{
位置：固定；
左：50%；
浮动：左；
z指数：1060；
}
#通知{
左-50%；
浮动：左；
位置：相对位置；
边框：实心1px黑色；
填充：10px；
边界半径：5px；
盒影：0px 0px 20px#000000；
背景颜色：黄色；
字体大小：粗体；
显示：无；
}
这就是你需要做的

$(":button").click(function(){
$("#notification").stop();    
$("#notification").text("A message to display").fadeIn().fadeOut(5000);
});

我还用新代码更新了你的小提琴
不，这不是我想要的。这将等待第一条消息消失，然后显示第二条消息。我想第二条消息显示新鲜时，第一条消息是显示，在这5秒钟内淡出，用户再次按下按钮。当再次按下按钮时，应完全移除第一个按钮，并更换新的按钮displayed@Yvette不，这不能回答问题。我在最初的问题中清楚地说出了我想要什么。所以这不是答案。@Yvette我没有改变我的答案。你能为它添加一个jfiddle吗！！！我已经这么做了。问题的最后就是我想要的。谢谢@connexo。是的，我改了。我喜欢@connexo的答案很有用。@Yvette不是问题…：）您可以利用jQuery中的链接函数功能，只需在.text（）之前添加.stop（），这将使其成为一行，而不会两次查询
#通知
@LalitMehra我没有将任何正确答案标记为无用。
$(":button").click(function(){
$("#notification").stop();    
$("#notification").text("A message to display").fadeIn().fadeOut(5000);
});