JQuery中stop方法的使用
- 巴扎黑原創
- 2017-06-30 11:33:391602瀏覽
在前台頁面開發中有時候我們會需要一些比較酷的效果，這個時候使用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) | ||||
| 清空佇列，目前執行動作 | 立即停止。後續動作會不再執行。 | 不清空佇列，目前執行動作 | 立即停止。後續動作會立即執行。 | ||
| 清除佇列，目前執行動作 | 立即完成。後續動作會不再執行。 | 不清空佇列，目前執行動作 | 立即完成。後續動作會立即執行。 | ||
| 清除佇列，目前執行動作 | 立即停止。後續動作會不再執行。 | 不清空佇列，目前執行動作 | 立即停止。後續動作會立即執行。 | ||
## 四、筆記
在jQuery的較高版本中stop還有一種用法，就是和佇列（queue）配合使用。對於這種用法，我目前還不是還不是屬性，這裡無法給出一個好的解釋。
留待以後在慢慢研究了。
目前stop的用法相信也足夠我們只用了。
##
以上是JQuery中stop方法的使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn