如何在鼠标悬停和鼠标移出时使用 Jquery 进行相对动画？

Question

我试图做到以下几点：

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

我发现 Jquery 可以正确地完成此操作，但只有一个大禁忌。当鼠标在动画过程中退出然后再次进入时，它会：

a）堆叠动画，导致完成大量（例如 100 个）动画，而只需要一个。

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

对此有什么想法吗？

Answer 1

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

来自 jQuery API 文档：

当我们需要在 mouseenter 和 mouseleave 上对元素进行动画处理时，.stop() 方法的用处显而易见：

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

我们可以创建一个漂亮的淡入淡出效果，而不会出现多重淡入淡出的常见问题
通过添加排队动画
.stop(true, true) 到链：

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

Answer 2

与其在每个动作上触发动画事件，不如拥有一个不断轮询特定变量的函数，并通过移动或不移动一定的（变量）量来相应地采取行动。然后，您的 mouseover 和 mouseout 事件将修改那些被轮询的变量，因此您不必担心触发数百个动画。如果我不明白，请告诉我，以便我可以澄清..

Answer 3

到目前为止，我发现的唯一有效的解决方案是在动画制作之前为 mouseenter 和 mouseexit 动画提供 ClearQueue() ，但我认为这在某些情况下可能是不需要的。

在使用 animate() 的情况下，这工作得很好，但是使用 SlideUp 和其他默认的 JQuery 动画，它会导致不正确的行为。