JQuery中stop方法的使用
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery中stop方法的使用相关的知识，希望对你有一定的参考价值。
在前台页面开发中有时候我们会需要一些比较酷的效果，这个时候使用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>
通过测试我们不难发现
有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>
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 <div class="bg" id="Div1"> 52 <div class="line" id="linetop"></div> 53 </div> 54 </body>
我们可以看到如下整理结果
| 方法 | 参数 | 说明 | 方法 | 参数 | 说明 |
|---|---|---|---|---|---|
| 清空队列，当前执行动作立即停止。后续动作会不再执行。 等同于：stop(false,false) | |||||
| [clearQueue] | 清空队列，当前执行动作立即停止。后续动作会不再执行。 | [clearQueue] | 不清空队列，当前执行动作立即停止。后续动作会立即执行。 | ||
| [clearQueue],[gotoEnd] | 清空队列，当前执行动作立即完成。后续动作会不再执行。 | [clearQueue],[gotoEnd] | 不清空队列，当前执行动作立即完成。后续动作会立即执行。 | ||
| [clearQueue],[gotoEnd] | 清空队列，当前执行动作立即停止。后续动作会不再执行。 | [clearQueue],[gotoEnd] | 不清空队列，当前执行动作立即停止。后续动作会立即执行。 | ||
四、笔记
在jQuery的较高版本中stop还有一种用法，就是和队列（queue）配合使用。对于这种用法，我目前还不是还不是属性，这里无法给出一个好的解释。
留待以后在慢慢研究了。
目前stop的用法相信也足够我们只用了。
以上是关于JQuery中stop方法的使用的主要内容，如果未能解决你的问题，请参考以下文章
如何在带有悬停事件的 jQuery 动画中正确使用 stop()？
.draggable 的 Jquery .trigger('stop') 方法