悬停时的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); });

.stop()中的true参数如下：

• 清除动画队列（默认为false ；应该不成问题。）
• 跳转到动画的结尾（默认为false ；阻止元素被捕获到动画的中间。在此很重要。）

Answer 2

您必须使用相应的mouseleave事件，从而在鼠标离开按钮并停止动画时捕获该事件。

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

Answer 3

您可以使用锁变量：

var stopAnimation = false;
$("#austriaBtn").mouseenter(
    function animate(){
        if(stopAnimation){
            stopAnimation = false;
        } else {
            $('#austria').animate({width:"35", top:"-=4", left:"-=4"},600);
            $('#austria').animate({width:"27", top:"+=4", left:"+=4"},600, animate);
        }
    }
);
$("#austriaBtn").mouseleave(
    function(){
        $('#austria').stop();
        stopAnimation = true;
    }
);