如何停止不断的动画

Question

请在此查看我的代码：http://jsfiddle.net/FVcJz/7/

当我们将鼠标悬停在文本上时，我们会看到一个动画。 如果我们将鼠标悬停在文本上5次，则该框将被动画5次。 如何设置一个代码，以防止第一个动画尚未完成时剩下4个动画？ 我的意思是只有当前一个悬停的动画不在进行时才有动画。 那么，当我们在文本上悬停5次时，动画将只运行1次（如果4个悬停在动画结束之前）

Answer 1

首先，您的代码无效，因此这是正确的代码：jsFiddle

如果我在动画停止前单击n次，则动画没有问题。你用过哪种浏览器？

Answer 2

如果动画正在进行中，您可以使用jquery'：animated'选择器进行测试。

if (!$(".bb").is(':animated'))
{
  //no animation yet
  $(".bb").animate(...);
}

Answer 3

你可以使用stop方法..

$(function () {

$(".tt").hover(function(){

    $(".bb").stop().animate({width:'150px'}, 500);  

},function() {

    $(".bb").stop().animate({width:'100px'}, 500);  


});     
});