jQuery笔记之animate中的queue

队列

队列的执行顺序

queue()

jQuery笔记之animate中的queue

dequeue()

输出对象里面的内容

依次出队

jQuery笔记之animate中的queue

不过这样写太麻烦了，因为每次都要输出，所以我们看下面的方法

jQuery笔记之animate中的queue

运用到队列输出的

jQuery笔记之animate中的queue

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9 </head>
10 
11 <body>
12     <div class="demo"></div>
13     <script src="../jq/jquery-3.3.1/jquery-3.3.1.js"></script>
14     <!-- <script src="../jq/Myjquery.js"></script> -->
15     <script>
16         //jquery queue dequeue clearQueue
17         // queue 可以传两个参数 type content。 一个是自定义的名字，还有一个是内容
18         //调用queue这个方法后会创建一个对象
19         //{chain: [function, function, function]}
20        
21         $('.demo')
22         .css({position: 'absolute', left: 0, top: 0,  100, height: 100, backgroundColor: 'red'})
23         .on('click', function(){ //绑定点击事件
24             $(this).dequeue('chain'); //输出队列chain
25         }).queue('chain', function(next){  //接着找到了下面的队列函数可以执行输出
26             $(this).animate({ 120, height: 120, left: 100, top: 100});//第一次
27             next(); 
28         }).queue('chain', function(next){
29             $(this).animate({ 220, height: 220, left: 200, top: 200});//第二次
30             next();
31         }).queue('chain', function(next){
32             $(this).animate({ 320, height: 220, left: 200, top: 300});//第三次
33         });
34     </script>
35 </body>
36 </html>

jQuery笔记之animate中的queue

相关推荐