动画队列

最新推荐文章于 2022-11-27 17:41:34 发布

Frank.Yi

最新推荐文章于 2022-11-27 17:41:34 发布

阅读量694

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/KaisonYi/article/details/89874540

版权

笔记专栏收录该内容

30 篇文章 0 订阅

订阅专栏

动画队列

jQuery中的animate的自定义动画中，含有动画队列的感念。将所要执行的动画按一个个的排列成一队，并先后顺序的一个个的执行。
###　范例代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    .container{
  position: relative;
}
.box {
  position: absolute;
  width: 100px;
  height: 100px;
  background: red;
}
  </style>
  <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
</head>
<body>
  <button id="btn1">start</button>
  <button id="btn2">step+50</button>
  <button id="btn3">step-50</button>
  <button id="btn4">auto</button>
  <button id="btn5">reset</button>
  <button id="btn6">stop(false,false)</button>
  <button id="btn7">stop(true,false)</button>
  <button id="btn8">stop(true,true)</button>
  <button id="btn9">finish</button>
  
  <div class="container">
    <div class="box"></div>
  </div>
  
  
  <script>
    $('#btn1').click(function(){
      $('.box').animate({
        left: '100px'
      }, 1000)
    })
    $('#btn2').click(function(){
      $('.box').animate({
        left: '+=50'
      }, 1000)
    })
    $('#btn3').click(function(){
      $('.box').animate({
        left: '-=50'
      }, 1000)
    })
    $('#btn4').click(function(){
      $('.box').animate({
        left: '100px'
      }, 1000)
      $('.box').animate({
        left: '100px',
        top: '100px'
      }, 1000)
      $('.box').animate({
        left: '0',
        top: '100px'
      }, 1000)
      $('.box').animate({
        left: '0',
        top: '0'
      }, 1000)
    })
    $('#btn5').click(function(){
      $('.box').animate({
        left: 0,
        top: 0
      }, 1000)
    })
    $('#btn6').click(function(){
      //停止当前动画
      $('.box').stop()
    })
    $('#btn7').click(function(){
      //停止当前动画，并清除未执行的动画队列
      $('.box').stop(true, false)
    })
    $('#btn8').click(function(){
      //停止当前动画，并清除未执行的动画队列，并且当前动画展示最终状态
      $('.box').stop(true, true)
    })
    $('#btn9').click(function(){
      //停止当前动画，并清除未执行的动画队列，并且当前动画展示最终状态
      $('.box').finish()
    })
    

  </script>
</body>
</html>

动画队列的停止和清除

clearQueue

清除动画队列中未执行的动画

.finish

停止当前动画，并清除动画队列中未完成的动画，并展示最终完成动画队列
动画4

.stop

stop（false,false）
停止当前正在运行的动画
stop(true,false)
停止当前动画，并清除未执行的动画队列
stop(true,true)
停止当前动画，并清除未执行的动画队列，并且当前动画展示最终状态

###　效果预览

http://js.jirengu.com/zawir/1/edit?html,css,output

Frank.Yi

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动画队列

动画队列jQuery中的animate的自定义动画中，含有动画队列的感念。将所要执行的动画按一个个的排列成一队，并先后顺序的一个个的执行。###　范例代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS Bin</title> &lt...
复制链接

扫一扫