如何覆盖CSS动画

Question

我有一个警报div，一旦它弹出，我就必须等到它完全消失后才能播放下一个动画。 是否有任何方法可以忽略/取消动画并让其被新动画覆盖？ 因此，当我将按钮悬停时，它会重新发出警报。

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


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

Answer 1

在show()方法的回调中，您可以将其隐藏。

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

});

Answer 2

一个简单的选择是在.finish()动画之前.show()动画。

工作示例：

 $('.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>