Question

我正在尝试以下内容：

我页面底部有一个固定的定位div。当鼠标进入和退出div时，动画高度为resp。 100px和50px。默认高度为50px。

我发现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动画会导致不正确的行为。

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

3 个答案: