jQuery 本身的動畫只有停止的功能,一但停止(stop)後就無法自動接著做未做完的動畫內容。因此 Pause 外掛擴充了 animate() 的功能,讓它可以支援暫停(pause)及恢復(resume)動畫等指令。
套件名稱:Pause jQuery plugin
套件版本:0.1
作者網站:http://tobia.github.com/Pause/
套件網址:N/A
發佈日期:2010-06-13
檔案大小:2.44 KB
檔案下載:jquery.pause.js
參數說明:
檢視原始碼 JavaScript
1 | 無 |
方法說明:
檢視原始碼 JavaScript
1 2 3 4 5 | // 暫停動畫 $(selector).pause(); // 恢復動畫 $(selector).resume(); |
使用範例:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.pause.js"></script> <style type="text/css"> div.demo { border: 1px solid #555; width: 550px; } #box1, #box2, #box3 { width: 100px; height: 100px; position: relative; } #box1 { background: #0C0; } #box2 { background: #090; } #box3 { background: #060; } </style> <script type="text/javascript"> $(function() { // 設定動畫 function setupBox(i){ var $box = $('#box' + i); // 移動到 left : 450 // 動畫完成後再接著 phase2 function phase1(){ $box.animate({ left: 450 }, 2000, phase2); } // 移動到 left : 0 // 動畫完成後再接著 phase1 function phase2(){ $box.animate({ left: 0 }, 2000, phase1); } // 當滑鼠移到區塊上時暫停動畫 // 移出後恢復動畫 $box.hover(function(){ $box.pause(); }, function(){ $box.resume(); }); phase1(); } setupBox(1); setupBox(2); setupBox(3); }); </script> <body> <div class="demo"> <div id="box1"></div> <div id="box2"></div> <div id="box3"></div> </div> </body> |
酷耶!! 這個可以做蠻多變化的! 謝謝老師的分享