1

我正在尝试以下内容：

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

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

a) 堆叠导致很多（比如 100 个）动画被完成的动画，而只有一个是必要的。

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

对此有什么想法吗？

4

3 回答 3

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();
});
于 2010-06-28T15:29:30.727 回答
0

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

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

于 2010-06-28T15:35:20.087 回答
0

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

于 2010-06-28T15:29:36.653 回答