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>

如何覆盖css动画

2 个答案:

工作示例：