jquery fading in/out a confirmation text

I have a div on the page which is empty (and/or hidden) by default and where a confirmation text after different actions is supposed to be printed out for a while and then disappear.

I wanted to do this with jquery but got stuck with fading in and out.

I used this code:

<div id='confirmation' style='display:none'></div>

$('#confirmation').html("<font color='green'>Success!</font>").fadeIn(300).delay(3000).fadeOut(300);

It kinda works but everything gets broken when the page sends several confirmation texts into this div. It still continues to try to fadeOut the previous one even after text has changed and then fades it In again.

I wanted it to behave like this: when several confirmations are being send with little delay between them it should stop executing the current sequence and start it from scratch (fade out instantly, change the text and then fade in slowly).

Also with initial 'display:none' the first sequence behaves differently.

Can you advise some way to achieve what I want?

Solution

You can use jQuery .stop() for that. Can be that you need to change the location of them to create the perfect sequence but I hope you get the idea. ✌️

Edit: forgot to add clearQueue true command. You can find more intel on https://api.jquery.com/stop/

$('#cc').click(function(){
  $('#confirmation').stop(true, false).html("Success").fadeIn(300).delay(3000).fadeOut(300);
});

#confirmation {
color:#000;
  border: 1px solid #CCC;
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="confirmation"></div>
<div id="cc">Click to confirm</div>