Question

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

HTML

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

CSS

#notification_wrapper 
{
    position: fixed;
    left: 50%;
    float: left;
    z-index: 1060;
}

#notification 
{
    left: -50%;
    float: left;
    position: relative;
    border: solid 1px black;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0px 0px 20px #000000;
    background-color: yellow;
    font-weight: bold;
    display: none;
}

的jQuery

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

现在问题，

当我通过单击按钮执行上面的jQuery代码时，通知显示正常，并在5秒后淡出。但是如果我在这5秒钟内再次点击该按钮，则第二个通知会在队列中排队，并且在第一个通知在5秒后淡出后再次显示通知。

我希望它以这种方式运行。当我按下按钮时，通知应显示5秒钟。如果我再次在5秒钟内按下该按钮，则第一个应该完全消失并且应该出现新按钮。

我正在附加一个FIDDLE用于演示。 FIDDLE

Answer 1

您需要在链的开头添加.stop(true, true)以停止当前正在运行的动画。

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

https://jsfiddle.net/Ltm20jc0/5/

http://api.jquery.com/stop/

Answer 2

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

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;
    });
});

Answer 3

也许这适用于jquery .stop() https://api.jquery.com/stop/，如下所示：JSFiddle

var counter = 1;
$(":button").click(function() {
  $("#notification").text('Message: ' + counter + ' to display').stop().fadeIn().fadeOut(5000);
  counter++;
});

#notification_wrapper {
  position: fixed;
  left: 50%;
  float: left;
  z-index: 1060;
}
#notification {
  left: -50%;
  float: left;
  position: relative;
  border: solid 1px black;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0px 0px 20px #000000;
  background-color: yellow;
  font-weight: bold;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="notification_wrapper">
  <div id="notification"></div>
</div>
<input type=button value=click />

Answer 4

这是你需要做的事情

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

我还用新代码更新了你的小提琴

基于Jquery的通知会重复

4 个答案: