在使用jQuery的.animate()的时候经常会遇到鼠标重复划过导致动画重复播放的问题。
这个时候就要用到stop([clearQueue], [gotoEnd])来阻止重复动画。
那么如何科学使用stop()来阻止重复动画呢？下面就举五个例子。

例1：无stop()的情况下：

$(this).animate();

如例子所示，在没有stop()的情况下，会随着鼠标划过的次数进行重复动画。

例2：stop(false, false)或者stop()

$(this).stop().animate();

默认为false，可以看到鼠标离开的一瞬间动画停止，但因为 [clearQueue]也是flase，所以会直接进入了下一步动画。动画的重复也仍旧还在。

例3：stop(false, true)

$(this).stop(false, true).animate();

[gotoEnd]为true，所以当鼠标离开后直接触发了最后的状态，然后直接运行了下面的高度变化的动画。但仍旧会重复动画。

例4：stop(true, false)

$(this).stop(true, false).animate();

[gotoEnd]为false，所以鼠标移开的一瞬间动画直接停止。同时 [clearQueue]为true，所以本应该执行的下一步高度变化的动画直接被清除，直接跳转播放鼠标移开后的动画。

例5：stop(true, true)

$(this).stop(true, true).animate();

两个值都为true的情况下，鼠标移开后动画直接播放到最终状态，同时[clearQueue]为true，所以本应该执行的下一步高度变化的动画直接被清除，直接跳转播放鼠标移开后的动画。