对jQuery stop()方法理解的一点记录
2018-09-02 | WEB前端 | 欧阳七仔 | 456°c
教材的文字一般都是极其精练，但是往往又是晦涩的。每个读者、学生的悟性不同，导致了接收程度快慢也不同。
七仔就是属于那种理解力慢半拍的人，看一个定理或者是说明，总是要比理解反应迅速的同学慢一些。天资不可比，没法子。
同时也深信一个道理：
只是看明白，不如自己会做（动手操作一遍）；
自己会做，不如自己把整个过程写出来；
自己写出来，不如把道理讲给不明白的同学，让其也明白；
教材上，w3school上，菜鸟教程上，都介绍得相当清楚了，理解能力强一些的同学，早就明白了。写出来只是想达到一个目的，理清一下自己的思路。
jQuery stop()方法语法结构：
$(selector).stop(stopAll,gotoEnd);
选择器，加方法的搭配结构；两个参数作为辅助，恰恰就是这两个参数的理解比较费事。
教参上的说明解释：
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
下面是七仔自己对这几句话的一些简单理解：（已经看明白的同学，可以关掉页面左转了）
测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>stop事件（带参数）</title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("div").animate({left:"200px"},5000);
$("div").animate({fontSize:"3em"},5000);
$("div").animate({bottom:"100px"},5000);
});
$("#stop").click(function(){
$("div").stop();
});
$("#stopAll").click(function(){
$("div").stop(true,false);
})
$("#stopAndToEnd").click(function(){
$("div").stop(true,true);
});
});
</script>
<style type="text/css">
div{
width: 150px;
height: 100px;
background-color: green;
position: absolute;
}
</style>
</head>
<body>
<p>语法：$(selector).stop(stopAll,gotoEnd)</p>
<p>参数默认值为false</p>
<button id="start">开始</button><br /><br />
<button id="stop">停止stop()</button>
<p>停止当前动画，后续未完成动画序列依次完成。</p>
<button id="stopAll">停止stop(true)</button>
<p>停止全部动画。</p>
<button id="stopAndToEnd">停止stop(true,true)</button>
<p>停止正在执行的动画，并快速完成该动作。将其他未完成动作清除。</p>
<div>hello</div>
</body>
</html>
1、$(selector).stop();
停止当前动画，当前动画以后未执行的动画，会依次执行；
①只有一个动画的，则相当于全部停止；
②上例中，待点击停止按钮时刻后未执行动画执行完成后，点击“开始”按钮，仍会将整个动画中未执行部分（点击“停止”被忽略执行的当前动画中的剩余部分）继续执行；
2、$(selector).stop(true);
①第二个参数值为默认值，相当于$(selector).stop(true,false);
②调用的时候，则会停止当前执行动画，未执行动画亦停止执行；
③上述测试案例中，点击“开始”按钮，动画仍旧沿着停止时候的状态依次执行；
3、$(selector).stop(true,true);
①立即完成当前动画；
②未执行的动画，将不再执行（上述案例中点击“开始”菜单，也不执行）；