jQuery – queue() 使用陣列來依序執行方法
預覽
解說
|
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 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <script src="plugin/JS/jquery-1.11.1.min.js"></script> <script> $(function(){ // 定義一個叫做 myfun 的執行序列 // // 第一個參數不填的話，預設"fx"會自動執行 // 名稱設定 "fx" 無法執行 animate() // // 第二個參數，就放置依序要執行的 function。 // 官方解釋『An array of functions to replace the current queue contents.』 // 就是 『當前 function 執行結束前使用 dequeue() 再次呼叫，可以跳往下一個 function』 // 例如下面 『第一個動畫執行結束前使用 dequeue() 再次呼叫，可以跳往第二個動畫』 $(".box").queue("myfun", [ //第一個動畫 function (){ console.log("A-start"); $(".box").animate({ marginLeft: 300 }, 2000, function (){ console.log("A-end") //呼叫使用 dequeue() 會取代當前執行的 function, //也就是使用下一個function $(this).dequeue("myfun"); }) }, //第二個動畫 function (){ console.log("B-start"); $(".box").animate({ marginLeft: "-=200" }, 1000, function (){ console.log("B-end"); }) } ]); // 執行它 $(".box").dequeue("myfun"); }) </script> <style> .box { width: 50px; height: 50px; background: black; float: left; } </style> <body> <div class="box"> </div> </body> </html> |
其他可以參考一下相關解說