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;
}

为什么jQuery mouseenter /离开动画两次？

1 个答案: