CODEWITHSUNDEEP
jqueryhtmlcss
Hemal
Hemal

Reputation: 3760

Jquery based notification repeats itself

I am using following CSS and HTML code to display a notification, when an event occurs.

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

Now the problem,

When I execute above jQuery code with a button click, notification displays fine and fades out with 5 seconds. But if I click that button again within those 5 seconds, second notification lines up in queue and it again displays notification after first one fades out after 5 seconds.

I want it to be running this way. When I press a button, notification should display for 5 seconds. If I again press that button within 5 seconds, first one should completely disappear and new one should appear.

I am attaching a FIDDLE for demo. FIDDLE

Upvotes: 3

Views: 61

Answers (4)

Lalit Mehra
Lalit Mehra

Reputation: 1273

This is what you need to do 

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

I have also updated your fiddle with the new code

Upvotes: 1

connexo
connexo

Reputation: 56753

You need to add .stop(true, true) at the beginning of your chain to stop the currently running animation.

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

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

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

Upvotes: 3

Mi-Creativity
Mi-Creativity

Reputation: 9654

Maybe this will work for you with the jquery .stop() https://api.jquery.com/stop/, as in this: 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 />

Upvotes: 1

Lejo
Lejo

Reputation: 1011

You need check if animation is running:

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

Upvotes: 2

Related Questions