如何在鼠标悬停和鼠标悬停时使用 Jquery 进行相对动画处理？答案

【问题标题】：How to do relative animating with Jquery on mouseover and mouseout?如何在鼠标悬停和鼠标悬停时使用 Jquery 进行相对动画处理？
【发布时间】：2011-03-09 04:54:01
【问题描述】：

我正在尝试以下内容：

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

我发现 Jquery 正确地做到了这一点，只有一个很大的禁忌。当鼠标在动画过程中退出然后重新进入时：

a) 将动画堆叠起来，从而完成很多（比如 100 个）动画，而只有一个是必要的。

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

对此有何想法？

【问题讨论】：

标签： javascript jquery css animation transformation

【解决方案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();
});

【讨论】：

.stop() 方法仅用于动画，.clearQueue() 也可用于删除已通过 .queue() 添加到通用 jQuery 队列中的任何函数方法。
在检查了 Jquery 文档之后，我会说 clearQueue，在 animate() 的情况下，与 stop(true,false) 相同。谢谢！
顺便说一句，我认为 JQuery 文档中给出的示例有效，但也是一个非常奇怪的实现，因为用户能够在子步骤中重新定位正方形。这样你就可以从 0px 开始并且永远不会返回那里，因为你在移动之间的某个地方点击了 STOP 按钮

【解决方案2】：

与其在每个动作上触发动画事件，不如让一个函数不断轮询特定变量并相应地采取行动——通过移动或不移动某个（变量）量。然后您的mouseover 和mouseout 事件将修改那些被轮询的变量，因此您不必担心触发数百个动画。让我知道我是否没有意义，以便我澄清..

【讨论】：

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

【解决方案3】：

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

在使用 animate() 的情况下，效果非常好，但使用 slideUp 和其他默认 JQuery 动画会导致不正确的行为。

【讨论】：