// 为了看效果，随意写的动画
$('#animater').animate({
'right':-800
}, 3000).animate({'font-size':'16px'},'normal').animate({'font-size':'26px'},'normal').animate({'font-size':'36px'},'normal').animate({'font-size':'46px'},'normal').animate({'font-size':'56px'},'normal').animate({'opacity':0},'normal').animate({'opacity':1},'normal').animate({'left':200,'font-size':'16px'},'normal'); // 点击不同的button执行不同的操作 $('#button1').click(function(){
//默认参数是false，不管写一个false还是两个false还是没写false效果一样
$('#animater').stop();
});
$('#button2').click(function(){
//第二个参数默认false
$('#animater').stop(true);
});
$('#button3').click(function(){
$('#animater').stop(false,true);
});
$('#button4').click(function(){
$('#animater').stop(true,true);
});
W3School上是这样的说明的：
stop(stopAll,goToEnd)
| 参数 | 描述 |
|---|---|
| stopAll | 可选。规定是否停止被选元素的所有加入队列的动画。 |
| goToEnd |
可选。规定是否允许完成当前的动画。 该参数只能在设置了 stopAll 参数时使用。 |
我的理解：
stopAll 为false时，不停止被选元素所有加入队列的动画,仅停止当前的动画。stopAll为true时，停止所有加入队列的动画（如goToend为true，直接跳到当前动画的最终效果）。
goToend为false时，不允许直接跳到当前动画的最终效果(应该就是所谓的完成当前的动画吧)，goToend为true时，允许直接跳到完成当前动画的最终末尾效果
每次运行页面,animater运动时，点击不同button,看到如下不同的效果（animater处在动画1时点击）：
点击按钮button1（stop()），由于两个参数都是false。所以点击发生时，animater没有跳到当前动画（动画1）的最终效果，而直接进入动画2，然后动画3，4，5.直至完成整个动画。
点击按钮button1（stop(true)），由于第一个是true，第二个是false，所以animater立刻全部停止了，动画不动了。
点击按钮button1（stop(false,true)），由于第一个是false，第 二个是true，所以点击发生时，animater身处的当前动画（动画1）停止并且animater直接跳到当前动画（动画1）的最终末尾效果位置，接 着正常执行下面的动画（动画2，3，4，5），直至完成整个动画。
点击按钮button1（stop(true，true)），由于两个都是true，所以点击发生时，animater跳到当前动画（动画1）的最终末尾效果位置，然后，全部动画停止。
工作中遇到过的实际案例：
我在项目里做的一个下拉菜单，当鼠标移上去的时候就菜单显示，当鼠标离开的时候菜单隐藏
true，true)，这样每次快速的移入移出菜单，就正常了，当移入一个菜单的时候，停止所有加入队列的动画，但是完成当前的动画（跳至当前动画的最终效果位置）