javascript - 如何在 mouseover 和 mouseout 上使用 Jquery 做相对动画？

Question

我正在尝试拥有以下内容:

我的页面底部有一个固定位置的 div。当鼠标进入和退出时，div 会对其高度进行动画处理。 100 像素和 50 像素。默认高度为 50 像素。

我发现 Jquery 只用一个大禁忌就可以正确地做到这一点。当鼠标在动画中退出然后再次重新进入时:

a) 堆叠动画导致完成很多(比如 100)个动画，而只需要一个。

b) 重置当前动画，这会导致意外行为，例如 div 消失、更改为锁定高度或在 100 到 50 像素之间上下出现故障。

对此有什么想法吗？

Answer 1

当您处理鼠标悬停和鼠标移出事件时，您应该使用 stop()清除动画队列的函数。如果需要，它会让您跳到动画的结尾(在开始另一个动画之前)。您还可以清除整个动画队列。

来自 jQuery API 文档:

The usefulness of the .stop() method is evident when we need to animate an element on mouseenter and mouseleave:

<div id="hoverme">
  Hover me
  <img id="hoverme" src="book.png" alt="" width="100" height="123" />
</div>

We can create a nice fade effect without the common problem of multiple queued animations by adding .stop(true, true) to the chain:

$('#hoverme-stop-2').hover(function() {
  $(this).find('img').stop(true, true).fadeOut();
}, function() {
  $(this).find('img').stop(true, true).fadeIn();
});