jQuery Wiggle 是一個跟 jRumble 效果很雷同的外掛套件。雖然它一樣可以讓指定的元素抖動，不過該外掛並沒有特別支援 IE 系列，所以 IE 若要能使用，可能要等到 10 才會有效果喔！
套件名稱：jQuery Wiggle
套件網址：1.0.0
作者網站：http://www.class.pm/files/jquery/jquery.wiggle/demo/
套件網址：N/A
發佈日期：2011-09-20
檔案大小：3.14 KB
檔案下載：jquery.wiggle.js
參數選項說明：
檢視原始碼 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 | degrees(選填) 描述： 抖動的傾斜角度 預設值： ['2','4','2','0','-2','-4','-2','0'] delay(選填) 描述： 抖動的速度(1000毫秒 = 1秒) 預設值： 35 limit(選填) 描述： 允許抖動幾次 預設值： null randomStart(選填) 描述： 是否隨機抖動; 若設為 false 則每次傾斜 2 度(degrees) 預設值： true onWiggle(選填) 描述： 當套用上 jQuery Wiggle 效果時要執行的動作 預設值： function(o) {} onWiggleStart(選填) 描述： 當開始抖動時要執行的動作 預設值： function(o) {} onWiggleStop(選填) 描述： 當停止抖動時要執行的動作 預設值： function(o) {} |
方法說明：
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 | // 把指定的元素加上 jQuery Wiggle 效果 $(selector).champagne(method, options); // 讓指定的元素加上 jQuery Wiggle 效果並開始抖動 $(selector).champagne('start', options); // 讓指定的元素加上 jQuery Wiggle 效果並停止抖動 $(selector).champagne('stop', options); // 判斷指定的元素是否抖動中 $(selector).champagne('isWiggling', options); |
使用範例：
檢視原始碼 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 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.wiggle.js"></script> <style type="text/css"> img { margin: 5px; } </style> <script type="text/javascript"> $(function(){ // 當圖片被點擊時 $('img2').click(function() { var $this = $(this); // 判斷是不是在抖動中 if ($this.wiggle('isWiggling')) { // 若是抖動中就停止抖動 $this.wiggle('stop'); }else{ // 若不是抖動中就開始抖動 $this.wiggle('start'); } }); // 效果同上 /* $('img').toggle(function() { $(this).wiggle('start'); }, function(){ $(this).wiggle('stop'); }); */ }); </script> <body> <img src="images/a.jpg" /> <img src="images/b.jpg" /> </body> |