javascript - 悬停时的 JQuery 动画循环

Question

这可能是一个非常基本的问题，但我试图在按钮悬停时为图像设置动画(具有一种脉冲效果)。

到目前为止我有这个:

$("#austriaBtn").mouseenter(
	function animate(){
		$('#austria').animate({width:"35", top:"-=4", left:"-=4"},600);
		$('#austria').animate({width:"27", top:"+=4", left:"+=4"},600, animate);
		}
	);

现在，我可以将鼠标悬停在按钮(austriaBtn)上，图像(奥地利)开始跳动，但是，当我拿开鼠标时，它会继续跳动。我怎样才能阻止它？ 我知道这一定与 stop() 有关，但每当我尝试将其放入时，动画就会停止工作。

提前致谢!

Answer 1

把 .stop() 在 .mouseleave() 功能。

$("#austriaBtn").mouseleave(function(){ $('#austria').stop(true,true); });

true .stop() 中的参数具体如下:

• 清除动画队列(默认为 false；应该不是问题。)
• 跳转到动画末尾(默认为 false ；阻止元素陷入动画中间。此处很重要。)