Jquery based notification repeats itself

Question

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

Answer 1

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/

Answer 2

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