为什么jQuery Mouseenter /离开动画两次

Question

我已经有这个代码：

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

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

谢谢

Answer 1

，如果您不希望它们累积，则需要在添加更多动画之前停止动画队列：http：//jsfiddle.net.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;
}