如何覆盖CSS动画

Question

I've an alert div, once it pops up I've to wait till it disappear completely before the next animation can occur. Is there any way to ignore/cancel the animation and let it be overwritten with new one? So it re-alert very time I hover the button.

$('.button').hover(function () {
  $('#alert-me').show();
  $("#alert-me").fadeOut(6000);
});


<div class="hidden-div" id="alert-me">
     <b> hello! </b>
</div>    

Answer 1

inside the callback of show() method you can hide it.

$('.button').hover(function () {
  $('#alert-me').show(function(){
    $("#alert-me").fadeOut(6000);
  });

});

Answer 2

A simple option would be to .finish() the animation before you .show() it.

Working Example:

 $('.button').hover(function () { $('#alert-me').finish().show(); $("#alert-me").fadeOut(6000); }); 

 .hidden-div { display: none; } .button { border: 1px solid grey; padding: 0.5em; margin: 0.5em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="button">button</div> <div class="hidden-div" id="alert-me"> <b> hello! </b> </div>