jquery的animate多次执行后动画速度变慢

Question

问题

我使用animate循环改变element的top值，当mouseenter时，用stop暂停，mouseleave时，继续执行该函数，可是当鼠标划入划出时，动画速度明显减缓，后来用setInterval解决了，可是不知道为什么会发生这中情况。

function doanimate(){
    div.animate({
        top:'450px'
    },1000,'linear',function(){
    div.css('top','0px');
    });
}
div.on('mouseenter mouseleaver',function(e){
    if(e.type == 'mouseenter'){
        div.stop(true);
    }
    else if(e.type =='mouseleave'){
        doanimate();
    }
}

Answer 1

多次执行 jQuery 动画, 并使用 stop 暂停, 并不是动画变慢, 而是调用 stop 时没有清空动画队列, 导致多个 timeout 来回更新样式, 忽大忽小, 从而看起来动画变慢了.

.stop( [clearQueue ] [, jumpToEnd ] )

stop 默认不会清空队列, 并且跳转到动画结束位置, 两个可选参数默认值都为 false.

改成

.stop(true, true)

试试

参考 http://api.jquery.com/stop/