Rumah > Artikel > hujung hadapan web > JQuery中stop方法的使用

JQuery中stop方法的使用

巴扎黑asal: 2017-06-30 11:33:391636semak imbas

在前台页面开发中有时候我们会需要一些比较酷的效果，这个时候使用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="color:#ff6a00; font-weight:bold;">立即停止</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]	不清空队列，当前执行动作立即停止。后续动作会立即执行。

四、笔记

在jQuery的较高版本中stop还有一种用法，就是和队列（queue）配合使用。对于这种用法，我目前还不是还不是属性，这里无法给出一个好的解释。

留待以后在慢慢研究了。

目前stop的用法相信也足够我们只用了。

Atas ialah kandungan terperinci JQuery中stop方法的使用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：jQuery stop()函数详解Artikel seterusnya：jquery 中 stop() 的用法实例详解

Artikel berkaitan

Lihat lagi