如何在mouseover和mouseout上使用Jquery进行相对动画处理？

Question

我正在尝试以下内容：

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

我发现Jquery仅通过一个大的禁忌就能正确地做到这一点。 当鼠标在动画时退出，然后再次重新进入时：

a）堆叠动画，从而完成很多（例如100个）动画，而只需要一个。

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

有什么想法吗？

Answer 1

处理鼠标悬停和鼠标移出事件时，应使用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动画会导致不正确的行为。