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>
