如何在mouseover和mouseout上使用Jquery制作相对动画?

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

当我们需要在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();
});

与其在每个动作上触发一个动画事件,不如让一个函数不断地轮询特定的变量,并相应地采取行动——通过移动或不移动某个(变量)量。你的 mouseover mouseout

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

在使用animate()的情况下,这可以很好地工作,但是对于slideUp和其他默认JQuery动画,它会导致不正确的行为。