jquery-delay(),queue()

Posted 2020-10-12 cyany_blue

 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>

View Code