jquery - 为什么jQuery mouseenter / leave动画两次？

Question

我有这个代码：

$(document).ready(function(){
     $('.first').mouseenter(function(){
         $(this).animate({
             top: '115px'
         }, 500 );
     });
     $('.first').mouseleave(function(){
         $(this).animate({
         top: '127px'
         }, 500 );
     });
 });

当我运行它时，我的 .first div 至少上下两次，如果不是更多的话，我不知道为什么会这样。

谢谢

Answer 1

如果您不希望它们建立，则需要在添加更多动画之前停止动画队列：http: //jsfiddle.net/bgjxk/

$(document).ready(function(){
     $('.first').mouseenter(function(){
         $(this).stop().animate({
             top: '115px'
         }, 500 );
     });
     $('.first').mouseleave(function(){
         $(this).stop().animate({
         top: '127px'
         }, 500 );
     });
});​

你也可以使用 CSS3 过渡来完成同样的事情，更流畅，而不用担心动画队列：http: //jsfiddle.net/bgjxk/1/

.first{
    ...
    position:absolute;
    top:127px;
    transition:top .25s linear; /* use them vendor prefixes */
}
.first:hover{
    top:115px;
}