Question

下面的代码基本上来回动画div。然后我希望动画在悬停时停止。如果我删除这一行就行了：“$（”。block“）。animate（{left：'0px'}，1，animate）;”然后div只是动画一次不是我想要的。那么如何保持.stop（）功能，但仍然让动画在无穷大中循环？

$(function animate(){
$(".block").animate({left: '+=500px'}, 2000);
$(".block").animate({left: '0px'}, 1, animate);
});

$(".block").hover(function(){
$(".block").stop();
$(".block").animate({ width:"20%", height:"20%"}, 500 );
});

Answer 1

<强>更新

不确定是否：

$(".block").stop( true, true );

是你要找的。

第一个true清除队列，最后一个true跳转到动画队列的末尾，有效地结束了动画。

$(".block").stop( true );

这会清除队列但不会跳到最后。

Answer 2

我猜你可以尝试在$（“。block”）。mouseleave（）上编写另一个函数，并在其中调用animate。当您的鼠标离开div时会触发此操作。也许你也可以尝试使用mouseenter和mouseleave的组合。在你的情况下，它的工作正常，并在你进入div区域时立即停止动画，但没有功能告诉它什么时候出来。我有一个类似的问题，我在鼠标悬停时褪色图像......它可以很好地尝试上述。

希望这有帮助！

如何停止动画循环

2 个答案: