jQuery开发手册之动画队列
沉沙 2018-07-24 来源 : 阅读 1101 评论 0

摘要:当在jQuery对象上调用动画方法时,如果对象正在执行某个动画效果,那么新调用的动画方法就会被添加到动画队列中,jQuery会按顺序依次执行动画队列的每个动画。

jQuery 动画队列

当在jQuery对象上调用动画方法时,如果对象正在执行某个动画效果,那么新调用的动画方法就会被添加到动画队列中,jQuery会按顺序依次执行动画队列的每个动画。

jQuery提供了以下几种方法来操作动画队列。

1. stop([clearQuery],[gotoEnd]):停止当前jQuery对象里每个DOM元素上正在执行的动画。

2. queue([queueName,]callback):将callback动画数添加到当前jQuery对象里所有DOM元素的动画函数队列的尾部。

3. queue([queueName,]naeQueue):用newQueue动画函数队列代替当前jQuery对象里所的DOM元素的动画函数队列。

4. dequeue():执行动画函数队列头的第一个动画函数,并将该动画函数移出队列。

5. clearQueue([queueName]):清空动画函数队列中的所有动画函数。

举个例子:

<html><head><script src="//code.jquery.com/jquery-1.9.1.min.js"></script>

  <meta charset="utf-8">

  <title>JS Bin</title>

   <style>

   .box {

     top: 30px;

     position: absolute;

     width: 200px;

     height: 200px;

     background-color: red;

   }

   body {

     position: relative;

   }

     span {

      margin-right: 10px;

   }

  </style> </head><body>

  

  <span>动画序列剩余</span>

  <span class="num">0</span>

  <span>部分</span>

  <div class="box"></div>

  <button class='btn'>点击开始动画</buton>

  <script>

    function runIt(){

      //获取动画队列进度

      showIt();

      //动画第一部分

      $('.box').animate({ left: '100', },1000)

      //动画第二部分

      $('.box').animate({ width:'400', },1000)

     //动画第三部分

      $('.box').animate({ left: '0'},1000)       

      //动画第四部分

       $('.box').animate({ width:'200' },1000)

      //动画第五部分

      $('.box').slideUp(1000)

      //动画第六部分

     $('.box').slideDown(1000,runIt)  

      }

      function showIt(){

        var num = $('.box').queue().length;

        //获取动画队列剩余长度

        $('.num').text(num);

        setTimeout(showIt,1000)

         //设置循环更新动画队列的进展

    }       

      $('.btn').on('click',runIt)

      //当点击button的时候,开始启动动画                        

  </script>

</body></html>

 

本文由职坐标整理发布,学习更多的jQuery相关知识,请关注职坐标WEB前端jQuery频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程