JQuery中stop方法的使用

巴扎黑 原创: 2017-06-30 11:33:39 1319浏览

在前台页面开发中有时候我们会需要一些比较酷的效果，这个时候使用JQuery中的动画来实现便显得非常的简单。

最近在工作中碰到了一个页面元素移动的效果，这是个简单的页面效果也非常容易实现。

在使用中用到了一个停止动画的方法"stop()"，以前只是用也没有过多的关注。

这几天再次碰到，便翻开文档测试了一番，竟也有了一些新的认识。对这个方法有了全新的了解，在这里把我的测试记录下来。

在JQuery文档中对这个方法的解释是这样的：

一、概述

停止所有在指定元素上正在运行的动画。

如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行。

二、没有参数

场景模拟

假设有一个元素需要在背景中进行移动，然后回到起始位置。页面中有三个按钮，分别负责“开始移动”，“采用了stop方法的回归”，“没有采用stop方法的回归”。

整体页面效果图如下：

测试代码和效果

 1 <script type="text/javascript"> 2          3         $(function () { 4             //向右移动600px 5             $("#Button1").click(function () { 6                 $("#move").stop().animate({ left: 610 }, 3000); 
 7             }); 8             //立即往回移动（有stop） 9             $("#Button2").click(function () {10                 $("#move").stop().animate({ left: 10 }, 3000); 
11             });12             //移动完600px，才会往回移动（没有stop）13             $("#Button3").click(function () {14                 $("#move").animate({ left: 10 }, 3000);15             });16 17         });18     </script>

View Code

通过测试我们不难发现

有stop，当蓝色方块在向右侧移动的时候，点击按钮，方块会立即往回返（向左侧移动）。

没有stop，当蓝色方块在向右侧移动的时候，点击按钮，方块会等到完全移动到指定位置后才往回返（向左侧移动）。

测试总结

stop()停止了当前正在执行的动画，并使后续的动画立即得到了执行。

三、两个参数或者一个参数

查看文档可以知道这个时候参数依次为：[clearQueue],[gotoEnd] 并且都为可选，类型都为Boolean。

clearQueue:如果设置成true，则清空队列。可以立即结束动画。

gotoEnd:让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。

我们可以挨个进行测试。代码如下：

 1 <style type="text/css"> 2         table, tr, th, td { 3             margin: 0px; 4             padding: 5px; 5             border-collapse: collapse; 6             border: 1px solid black; 7         } 8  9         .bg {10             background-color: #8FBC8F;11             border: 1px solid black;12             width: 1000px;13             height: 200px;14             margin: 10px;15             position: relative;16         }17 18         .line {19             position: absolute;20             background-color: #3b9feb;21         }22 23         #linetop {24             top: 10px;25             left: 10px; /*width:980px;*/26             height: 5px;27         }28     </style>29     <script type="text/javascript">30 31         $(function () {32             // 33 34             var line;35 36             $("#start").click(function () {37                 line = $("#linetop").animate({ width: 980 }, 3000)38                                     .animate({ height: 180 }, 3000);39             });40 41 42             $("#stop").click(function () {43                 $("#linetop").stop();44             });45 46             $("#stop_true").click(function () {47                 $("#linetop").stop(true);48             });49 50             $("#stop_false").click(function () {51                 $("#linetop").stop(false);52             });53 54 55             $("#stop_true_true").click(function () {56                 $("#linetop").stop(true, true);57             });58 59             $("#stop_true_false").click(function () {60                 $("#linetop").stop(true, false);61             });62 63             $("#stop_false_true").click(function () {64                 $("#linetop").stop(false, true);65             });66 67             $("#stop_false_false").click(function () {68                 $("#linetop").stop(false, false);69             });70 71         });72     </script>

View Code

 1 <body><input type="button" id="start" value="动作开始" /> 2     <table> 3         <tr> 4             <th>方法</th> 5             <th>参数</th> 6             <th>说明</th> 7             <th>方法</th> 8             <th>参数</th> 9             <th>说明</th>10         </tr>11         <tr>12             <td>13                 <input type="button" id="stop" value="stop()" /></td>14             <td></td>15             <td colspan="4">清空队列，当前执行动作<span  style="max-width:90%">立即停止</span>。后续动作会不再执行。16                 等同于：<span style="color:#ff6a00; font-weight:bold;">stop(false,false)</span>17             </td>18         </tr>19         <tr>20             <td>21                 <input type="button" id="stop_true" value="stop(true)" /></td>22             <td>[clearQueue]</td>23             <td>清空队列，当前执行动作<span style="color:#ff6a00; font-weight:bold;">立即停止</span>。后续动作会不再执行。</td>24             <td>25                 <input type="button" id="stop_false" value="stop(false)" /></td>26             <td>[clearQueue]</td>27             <td>不清空队列，当前执行动作<span style="color:#ff6a00; font-weight:bold;">立即停止</span>。后续动作会立即执行。</td>28         </tr>29         <tr>30             <td>31                 <input type="button" id="stop_true_true" value="stop(true,true)" />32             </td>33             <td>[clearQueue],[gotoEnd]</td>34             <td>清空队列，当前执行动作<span style="color:#150ce6; font-weight:bold;">立即完成</span>。后续动作会不再执行。</td>35             <td>36                 <input type="button" id="stop_false_true" value="stop(false,true)" />37             </td>38             <td>[clearQueue],[gotoEnd]</td>39             <td>不清空队列，当前执行动作<span style="color:#150ce6; font-weight:bold;">立即完成</span>。后续动作会立即执行。</td>40         </tr>41         <tr>42             <td><input type="button" id="stop_true_false" value="stop(true,false)" /></td>43             <td>[clearQueue],[gotoEnd]</td>44             <td>清空队列，当前执行动作<span style="color:#ff6a00; font-weight:bold;">立即停止</span>。后续动作会不再执行。</td>45             <td><input type="button" id="stop_false_false" value="stop(false,false)" /></td>46             <td>[clearQueue],[gotoEnd]</td>47             <td>不清空队列，当前执行动作<span style="color:#ff6a00; font-weight:bold;">立即停止</span>。后续动作会立即执行。</td>48         </tr> 
49 50     </table> 
51     <p class="bg" id="p1">52         <p class="line" id="linetop"></p>53     </p>54 </body>

View Code

我们可以看到如下整理结果

参数	说明	参数	说明
	清空队列，当前执行动作立即停止。后续动作会不再执行。等同于：stop(false,false)
[clearQueue]	清空队列，当前执行动作立即停止。后续动作会不再执行。	[clearQueue]	不清空队列，当前执行动作立即停止。后续动作会立即执行。
[clearQueue],[gotoEnd]	清空队列，当前执行动作立即完成。后续动作会不再执行。	[clearQueue],[gotoEnd]	不清空队列，当前执行动作立即完成。后续动作会立即执行。
[clearQueue],[gotoEnd]	清空队列，当前执行动作立即停止。后续动作会不再执行。	[clearQueue],[gotoEnd]	不清空队列，当前执行动作立即停止。后续动作会立即执行。