jQuery笔记之animate中的queue

队列

队列的执行顺序

queue()

dequeue()

输出对象里面的内容

依次出队

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

运用到队列输出的

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

 </head>

 <body>

     <div class="demo"></div>

     <script src="../jq/jquery-3.3.1/jquery-3.3.1.js"></script>

     <!-- <script src="../jq/Myjquery.js"></script> -->

     <script>

         //jquery queue dequeue clearQueue

         // queue 可以传两个参数 type content。 一个是自定义的名字，还有一个是内容

         //调用queue这个方法后会创建一个对象

         //{chain: [function, function, function]}

         $('.demo')

         .css({position: 'absolute', left: 0, top: 0, width: 100, height: 100, backgroundColor: 'red'})

         .on('click', function(){ //绑定点击事件

             $(this).dequeue('chain'); //输出队列chain

         }).queue('chain', function(next){  //接着找到了下面的队列函数可以执行输出

             $(this).animate({width: 120, height: 120, left: 100, top: 100});//第一次

             next();

         }).queue('chain', function(next){

             $(this).animate({width: 220, height: 220, left: 200, top: 200});//第二次

             next();

         }).queue('chain', function(next){

             $(this).animate({width: 320, height: 220, left: 200, top: 300});//第三次

         });

     </script>

 </body>

 </html>

巴特西

jQuery笔记之animate中的queue

最新文章

热门文章