Javascript 如何在mouseover和mouseout上使用Jquery进行相对动画制作？

我正在努力做到以下几点：

我的页面底部有一个固定的div。当鼠标进入和退出时，div会将其高度设置为resp。100像素和50像素。默认高度为50px

我发现Jquery只使用了一个大禁忌就可以正确地做到这一点。当鼠标在设置动画时退出，然后再次进入时：

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

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

---

对此有何想法？

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

从jQuery API文档中：

当我们需要在mouseenter和mouseleave上为元素设置动画时，.stop（）方法的用处显而易见：

---

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

从jQuery API文档中：

当我们需要在mouseenter和mouseleave上为元素设置动画时，.stop（）方法的用处显而易见：

---

与其在每个动作上触发一个动画事件，不如让一个函数不断轮询特定的变量，并通过移动或不移动一定量（变量）来相应地进行操作。然后，您的

mouseover

和

mouseout

事件将修改轮询的变量，因此您不必担心触发数百个动画。让我知道我是否有意义，以便我可以澄清..

与其在每个动作上触发动画事件，不如让一个函数不断轮询特定变量，并通过移动或不移动一定量（变量）来相应地采取行动。然后，您的

mouseover

和

mouseout

事件将修改轮询的变量，因此您不必担心触发数百个动画。如果我说得不清楚，请告诉我，以便我可以澄清..

到目前为止，我发现唯一可行的解决方案是在设置动画之前为mouseenter和mouseexit动画都提供一个ClearQueue（），但我认为在某些情况下这可能是不需要的

---

在使用animate（）的情况下，这非常有效，但是使用slideUp和其他默认JQuery动画会导致不正确的行为。

到目前为止，我发现唯一可行的解决方案是在设置动画之前为mouseenter和mouseexit动画提供一个ClearQueue（），但我认为在某些情况下这可能是不需要的

---

在使用animate（）的情况下，这非常有效，但对于slideUp和其他默认JQuery动画，这会导致不正确的行为。

.stop（）方法仅用于动画，.clearQueue（）还可用于删除已添加到带有.queue（）的通用JQuery队列中的任何函数在检查Jquery文档之后，我认为在animate（）的情况下，clearQueue与stop相同（true，false）。谢谢顺便说一句，我认为JQuery文档中给出的示例是可行的，但也是一个非常奇怪的实现，因为用户能够在子步中重新定位正方形。这样，您就可以从0px开始，再也不会返回到0px，因为您已经在移动之间的某个位置单击了停止按钮。STOP（）方法仅用于动画。clearQueue（）还可以用于删除已添加到具有.queue（）的通用jQuery队列中的任何函数在检查Jquery文档之后，我认为在animate（）的情况下，clearQueue与stop相同（true，false）。谢谢顺便说一句，我认为JQuery文档中给出的示例是可行的，但也是一个非常奇怪的实现，因为用户能够在子步中重新定位正方形。这样，您就可以从0px开始，再也不会返回到0px，因为您在两次移动之间的某个位置单击了“停止”按钮。这不是非常消耗cpu吗？考虑到轮询在查看另一个选项卡或最小化浏览器时仍然有效。这取决于您执行轮询的频率。您可以每隔几秒钟进行一次轮询，如果有任务需要管理，您可以临时提高轮询率。。我不知道，这似乎是处理动画排队问题的最佳方法，而且最终会非常迅速。也许在动画上调用

stop（）

会更好-就我的2美分：这不是很消耗cpu吗？考虑到轮询在查看另一个选项卡或最小化浏览器时仍然有效。这取决于您执行轮询的频率。您可以每隔几秒钟进行一次轮询，如果有任务需要管理，您可以临时提高轮询率。。我不知道，这似乎是处理动画排队问题的最佳方法，而且最终会非常迅速。也许在动画上调用

stop（）

会更好-只需我的2美分：P

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

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