队列的执行顺序
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>
来源: http://www.bubuko.com/infodetail-3070851.html