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

本质
多次执行 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 参数时使用。