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

问题

我使用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();
    }
}
阅读 5.4k
1 个回答

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

.stop( [clearQueue ] [, jumpToEnd ] )

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

改成

.stop(true, true)

试试

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题