1     <style>
 2         div{
 3             width: 100px;
 4             height: 100px;
 5         }
 6         .div1{background: red;display: none;}
 7         .div2{background: yellow}
 8         .div3{background: blue}
 9         .div4{background: purple}
10         .div5{background: pink}
11
 
     </style>
12     <p></p>
13     <div class="div1"></div>
14     <div class="div2"></div>
15     <div class="div3"></div>
16     <div class="div4"></div>
17     <div class="div5"></div>
18     <script>
19         $(".div1").hover();
 
20         $(".div2").slideDown();
21         $(".div3").fadeIn();
22         $(".div4").fadeOut().delay(1000).fadeIn(1000);
23         $(".div5").fadeOut().delay(1200).fadeIn(1000);
24         // delay()方法可以延遲隊列，先執行完fadeOut之後，等待1200ms之後才可以執行下一個動畫,只能用在動畫中
25 
26         $(".div2").click(function(){
27             function
 
 showIt(){
28                 $(".div1").fadeIn(2000);
29                 $(".div1").slideDown(2000);
30                 $(".div1").slideUp(2000);
31                 $(".div1").fadeOut(2000,showIt);
32             }
33                 function showab(){
34                     // var n =$(".div1").queue("fx");
35                     // 也可以傳遞一個匿名函數,或則可以在匿名函數中傳入一個函數名
36                     // 註意使用.queue()添加一個函數，應保證最後的時候$(this).dequeue(),這樣能讓隊列中的其他函數按順序執行
37                     $(".div1").queue("fx",function(nextFun){
38                         alert("ok ,that is all!");
39                         $(".div1").dequeue();
40                         // nextFun();
41                     })
42             $("p").text(n.length)
43             setTimeout(showIt,1000)
44                 }
45             showIt();
46             showab();
47         });
48         $(".div3").click(function(){
49             $(".div2").slideDown(1000).fadeIn(1000).fadeOut(1000).slideUp(1000);
50             $(".div2").queue(function(){
51                 alert("div2 is over!");
52             })
53         })
54 
55     </script>

jquery-delay(),queue()