JQuery中stop方法的使用

本文轉載自查看原文 2016-09-06 09:35 2892 jQuery/ JQuery

在前台頁面開發中有時候我們會需要一些比較酷的效果，這個時候使用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     <div class="bg" id="Div1">
52         <div class="line" id="linetop"></div>
53     </div>
54 </body>

View Code

我們可以看到如下整理結果

參數	說明	參數	說明
	清空隊列，當前執行動作立即停止。后續動作會不再執行。等同於：stop(false,false)
[clearQueue]	清空隊列，當前執行動作立即停止。后續動作會不再執行。	[clearQueue]	不清空隊列，當前執行動作立即停止。后續動作會立即執行。
[clearQueue],[gotoEnd]	清空隊列，當前執行動作立即完成。后續動作會不再執行。	[clearQueue],[gotoEnd]	不清空隊列，當前執行動作立即完成。后續動作會立即執行。
[clearQueue],[gotoEnd]	清空隊列，當前執行動作立即停止。后續動作會不再執行。	[clearQueue],[gotoEnd]	不清空隊列，當前執行動作立即停止。后續動作會立即執行。

四、筆記

在jQuery的較高版本中stop還有一種用法，就是和隊列（queue）配合使用。對於這種用法，我目前還不是還不是屬性，這里無法給出一個好的解釋。

留待以后在慢慢研究了。

目前stop的用法相信也足夠我們只用了。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 多線程中stop()方法和suspend方法為什么不建議使用？ jQuery animate動畫 stop()方法詳解~ jQuery中的$.grep()方法的使用 jQuery stop（）的用法 jquery之stop()的用法 JQuery中each()的使用方法說明 jQuery與JS中的map()方法使用 jquery中$.ajax()方法使用詳解 jquery中siblings方法配合什么方法一起使用 jQuery中的join方法