本质
多次执行 jQuery 动画, 并使用 stop 暂停, 并不是动画变慢, 而是调用 stop 时没有清空动画队列, 导致多个 timeout 来回更新样式, 忽大忽小, 从而看起来动画变慢了.
.stop( [clearQueue ] [, jumpToEnd ] )
stop 默认不会清空队列, 并且跳转到动画结束位置, 两个可选参数默认值都为 false.
改成:
.stop(true, true)
复习一下 jQuery 效果 - stop() 方法
实例
停止当前正在运行的动画:
$("#stop").click(function(){
$("#box").stop();
});
定义和用法
stop() 方法停止当前正在运行的动画。
语法
$(selector).stop(stopAll,goToEnd)
参数 描述
stopAll 可选。规定是否停止被选元素的所有加入队列的动画。
goToEnd 可选。规定是否允许完成当前的动画。该参数只能在设置了 stopAll 参数时使用。