JQuery制作过多的动画队列

Question

所以今天我想制作一个简单的动画，当我将鼠标悬停在按钮上时会使按钮增长，并且当我将鼠标从按钮上移开时缩小。我尝试使用这个简单的JQuery代码，但问题是如果我把动画速度放慢，多次运行和关闭按钮会创建多个动画队列，这将在我的鼠标已经离开按钮后运行很久。

如果鼠标离开按钮，是否有办法在收缩之后终止队列？很明显，我想在按钮缩小之后杀死队列，以使动画生效。

相关HTML：

<div id="global-nav"> 
    <ul id="top-nav"> 
     <li class="nav-list"><a class="nav" href="http://images6.fanpop.com/image/photos/33400000/Cats-cats-33441067-1280-800.jpg">Link1</a></li> 
     | 
     <li class="nav-list"><a class="nav" href="http://images4.fanpop.com/image/photos/16100000/-cats-16140154-1920-1080.jpg">Link2</a></li> 
     | 
     <li class="nav-list"><a class="nav" href="http://learningfromdogs.files.wordpress.com/2010/09/cats-in-sink.jpg">Link3</a></li> 
     | 
     <li class="nav-list"><a class="nav" href="http://25.media.tumblr.com/55b8c778e82b28aef27be5d6da8eaa7e/tumblr_meysfu2tM91qzv52ko1_500.jpg">Link4</a></li> 
    </ul> 
</div> 

相关的JavaScript：

$(document).ready(function() { 
    $(".nav").mouseover(function() { 
     $(this).animate({ 
      paddingTop:'6px', 
      paddingRight:'4px', 
      paddingBottom:'6px', 
      paddingLeft:'4px' 
     },"slow"); 
    }).mouseout(function() { 
     $(this).animate({ 
      paddingTop:'3px', 
      paddingRight:'2px', 
      paddingBottom:'3px', 
      paddingLeft:'2px' 
     },"slow"); 
    }); 
}); 

的jsfiddle：http://jsfiddle.net/76tna/

请原谅对方CSS，猫文本和HTML。我指的是导航栏中的按钮。 （如果您好奇，这是为了我妹妹。）

Answer 1

TRY THIS FIDDLE

您需要使用stop功能，但如果你look at the docs你看，你要记得输入true的功能来清除队列，因为它默认为false。

$(document).ready(function() { 
    $(".nav").stop(true).mouseenter(function() { 
     $(this).animate({ 
      paddingTop:'6px', 
      paddingRight:'4px', 
      paddingBottom:'6px', 
      paddingLeft:'4px' 
     },"slow"); 
    }).mouseout(function() { 
     $(this).stop(true).animate({ 
      paddingTop:'3px', 
      paddingRight:'2px', 
      paddingBottom:'3px', 
      paddingLeft:'2px' 
     },"slow"); 
    }); 
}); 

Answer 2

您需要.stop()当前动画开始下一个之前，否则它会按照您目前的观察排队。

Answer 3

$(document).ready(function() { 
    $(".nav").mouseover(function() { 
     $(this).css({ 
      paddingTop:'6px', 
      paddingRight:'4px', 
      paddingBottom:'6px', 
      paddingLeft:'4px', 
      transition: 'padding 0.3s ease'    
    }); 
}).mouseout(function() { 
    $(this).css({ 
     paddingTop:'3px', 
     paddingRight:'2px', 
     paddingBottom:'3px', 
     paddingLeft:'2px', 
     transition: 'padding 0.3s ease' 
    }); 

}); 
});