对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);
①立即完成当前动画;
②未执行的动画,将不再执行(上述案例中点击“开始”菜单,也不执行);