jQuery动画队列

队列

队列的本质是一个数组，对队列的理解先从数组的push和shift开始。push是从数组尾端插入新的元素，shift是从数组首端删除元素；分别对应队列中得queue和dequeue。
jquery所有动画基于animate方法，而animate的动画默认保存在名为fx的动画队列中。
queue就是将动画放进队列中，dequeue就是将动画从队列中删除并执行它。

jQuery : queue() 方法

queue() 方法显示或操作在匹配元素上执行的函数队列

.queue(queueName,newQueue)

queueName 可选。字符串值，包含序列的名称。默认是 fx, 标准的效果序列。
每个元素均可拥有一到多个由 jQuery 添加的函数队列。在大多数应用程序中，只使用一个队列（名为 fx）。

动画队列

队列运行在元素上异步地调用动作序列，而不会终止程序执行。典型例子时调用元素上的多个动画方法。例如：

$('#foo').slideUp()
         .fadeIn();

它的执行顺序是元素先slideUp后再fadeIn，slideUp和fadeIn有先后顺序。jquery会默认地将它们放进名为fx的队列中，我们可以这样认为：

var fx = [slideUp, fadeIn];

//相当于
$('#foo').queue('fx', fx);

//第一步：出列第一个元素slideUp并执行它
$('#foo').dequeue('fx');    //fx = ['inprogress', fadeIn]

//第二步：出列第二个元素fadeIn并执行它
$('#foo').dequeue('fx');    //fx = ['inprogress']

//第三步，队列fx为空，动画执行完毕
fx = [];

通过不断的dequeue，fx每个元素逐个依次出列执行，直至队列没有元素。
也可以这样理解

$box.hide(1000, function(){
   $box.show(1000, function(){
     $box.fadeOut('slow',function(){
       $box.fadeIn('slow',function(){
         $box.slideUp(function(){
           $box.slideDown(function(){
             console.log('动画执行完毕')
           })
         })
       })
     })
   })
})
//等价于
$box.hide(1000)
    .show(1000)
    .fadeOut()
    .fadeIn()
    .slideUp()
    .slideDown(function(){
      console.log('真的完毕了')
    })

注意：

当通过 .queue() 添加函数时，我们应当确保最终调用了 .dequeue()，这样下一个排队的函数才能执行
当这样写代码时：

  $('#foo').slideUp().fadeIn().css({'width':'200px'});

它的执行顺序是元素宽度马上变成200px的同时，slideUp也在执行，slideUp执行完后再执行fadeIn

自定义动画

简单的动画不能满足需求的时候，jquery提供了自定义动画行为的方法

.animate( properties [, duration ] [, easing ] [, complete ] )

properties是一个CSS属性和值的对象,动画将根据这组对象移动。

$('#btn').click(function() {
  $('#foo').animate({
    opacity: 0.25,
    left: '+=50',
  }, 5000, function() {
    console.log('执行完毕')
  });
});

.clearQueue

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

.finish

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

.stop( [clearQueue ] [, jumpToEnd ] )

停止当前正在运行的动画
clearQueue(default: false)
jumpToEnd(default: false)

    $('#btn6').click(function(){
      //停止当前动画
      $('.box').stop()
    })
    $('#btn7').click(function(){
      //停止当前动画，并清除未执行的动画队列
      $('.box').stop(true, false)
    })
    $('#btn8').click(function(){
      //停止当前动画，并清除未执行的动画队列，并且当前动画展示最终状态
      $('.box').stop(true, true)
    })
    $('#btn9').click(function(){
      //停止当前动画，并清除未执行的动画队列，并且当前动画展示最终状态
      $('.box').finish()
    })

作者：彭荣辉
链接：https://www.jianshu.com/u/0f804364a8a8
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

最后编辑于：2018.04.13 17:06:16