jQuery方法-queue()

標籤：

 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4     <meta charset="utf-8" /> 5     <title></title> 6   <style> 7   div { margin:3px; width:40px; height:40px; 8         position:absolute; left:0px; top:30px;  9         background:green; display:none; }10   div.newcolor { background:blue; }11   </style>12 13   <script type="text/javascript" src="javascript/jquery-1.11.1.js"></script>14 </head>15 16 <body>17 18   請點擊這裡。。。19   <div></div>20 21 <script>22     $(document.body).click(function () {23         $("div").show("slow");24         $("div").animate({left:‘+=200‘},2000,function(){25             $("div").addClass("newcolor");//將需要執行的js代碼，加在動畫的回呼函數中也行26         });27 28         // $("div").queue(function () {29         //   $(this).addClass("newcolor");30         //   $(this).dequeue();31         // });32         // $("div").addClass("newcolor");//這種執行失敗了，因為動畫是延遲排隊載入，這個先於動畫載入了33         $("div").animate({left:‘-=200‘},500,function(){34             $("div").removeClass("newcolor");35         });36         // $("div").queue(function () {37         //   $(this).removeClass("newcolor");38         //   $(this).dequeue();39         // });40         // $("div").removeClass("newcolor");//執行失敗41         $("div").slideUp();42 43         //動畫都是非同步載入的，但是他們會排隊，一個一個執行，但是中間如果要插入一段js執行，則可能必須要加在動畫的回呼函數中，44         //才能確保它能順利執行45         //但是queue()函數，可以在動畫執行隊列中，也不需要加在回呼函數中46         //用了queue()函數之後，必須同時搭配dequeue()函數，這樣才能執行下一個函數47         // clearQueue()是清除所有未執行的動畫，包括queue()插入的48     });49 </script>50 51 </body>52 </html>

 

jQuery方法-queue()