美文网首页
jQuery动画队列

jQuery动画队列

作者: cccccchenyuhao | 来源:发表于2018-10-23 10:53 被阅读6次

当在jQuery对象上调用动画方法时,如果对象正在执行某个动画效果,那么新调用的动画方法就会被添加到动画队列中,jQuery会按顺序依次执行动画队列的每个动画。可是如果用户的操作比动画快,用户对一个对象频繁操作时不处理动画队列就会造成队列堆积,影响到效果,所以我们可以用以下方法处理队列

.clearQueue
//清除动画队列中未执行的动画

.finish
//停止当前动画,并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态

.stop( [clearQueue ] [, jumpToEnd ] )
//停止当前正在运行的动画

clearQueue(default: false)
jumpToEnd(default: false)

例子:

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</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>

相关文章

  • jQuery 动画队列

    jQuery 动画队列 动画队列的方法: 我们知道jQuery提供了以下几种方法来操作动画队列: stop([cl...

  • jQuery动画队列

    jQuery 动画队列 当在jQuery对象上调用动画方法时,如果对象正在执行某个动画效果,那么新调用的动画方法就...

  • jQuery动画队列

    什么是动画队列? jQuery动画存在一个队列, 会把事件产生的动画 放在一个队列中,当来不及执行这些事件队列的时...

  • jQuery动画队列

    队列实现是jQuery非常棒的一个拓展,使用动画队列可以使动画更容易实现。 .animate( propertie...

  • jQuery动画队列

    队列 队列的本质是一个数组,对队列的理解先从数组的push和shift开始。push是从数组尾端插入新的元素,sh...

  • jQuery动画队列

    动画队列 动画队列可以说是动画执行的一个顺序机制,当我们对一个对象添加多次动画效果时后,添加的动作就会被放入这个动...

  • jQuery 动画队列

    动画 逐渐缩放$().show(speed,function) 显示 time是动画的时间,可以是$().hide...

  • jQuery动画队列

    动画队列 队列的作用就是让我们把一个又一个的任务放到一起,确保只有当前面的任务完成了,才会开始下一个任务。这里面的...

  • jQuery动画队列

    当在jQuery对象上调用动画方法时,如果对象正在执行某个动画效果,那么新调用的动画方法就会被添加到动画队列中,j...

  • jQuery动画队列

    当在jQuery对象上调用动画方法时,如果对象正在执行某个动画效果,那么新调用的动画方法就会被添加到动画队列中,j...

网友评论

      本文标题:jQuery动画队列

      本文链接:https://www.haomeiwen.com/subject/fuvozftx.html