Jquery中的动画队列

当在jQuery对象上调用动画方法时，如果对象正在执行某个动画效果，那么新调用的动画方法就会被添加到动画队列中，jQuery会按顺序依次执行动画队列的每个动画。也就是说，如果同时给一个元素绑定了多个动画，执行动画时不是“同时”执行所有动画，而是将动画放到一个默认的名称为'fx'的队列中。

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]):清空动画函数队列中的所有动画函数。

例如，如下代码会执行一组动画，正方形会依顺序行走一周

  


  
 
  start
  stop
  clear
  
当前动画队列剩余0个动画

.box {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
}

#start {
  position: absolute;
  top: 200px;
}

#stop {
  position: absolute;
  top: 200px;
  left: 60px;
}

#clear {
  position: absolute;
  top: 200px;
  left: 110px;
}

.queue-info {
  position: absolute;
  top: 210px;
}

function anime(){
  var num = setInterval(showQueueLength, 50);
  $('.box').animate({
    width: '200'
  })
  .animate({
    left: '100',
    width: '100'
  })
  .animate({
    height: '200'
  })
  .animate({
    height: '100',
    top: '100'
  })
  .animate({
    width: '200',
    left: '0'
  })
  .animate({
    width: '100',
  })
  .animate({
    height: '200',
    top: '0'
  })
  .animate({
    height: '100',
  });
  
}

$('#start').on('click', anime);

function showQueueLength(){
  var length = $('.box').queue('fx').length;
  $('#num').text(length);
}

执行代码结果

animate1.gif

这是比较简单的情况，所有的动画都是用animate()函数来实现，那么如果我们想让正方形在移动的过程中，将颜色变为蓝色，该如何实现？

需求很简单，即正方形移动->变色->继续移动
那么代码就可以这样写

$('.box').animate({
    width: '200'
  })
  .animate({
    left: '100',
    width: '100'
  })
  .animate({
    height: '200'
  })
  .css('background-color', 'blue')
  .animate({
    height: '100',
    top: '100'
  })
  ......

在动画的过程中插入了css函数改变正方形的颜色，那么实际结果如何？
执行代码结果

animate2.gif

可以看到，在动画开始的一瞬间，正方形就变成了蓝色，而不是在动画执行的过程中，这是由于css()函数并不是动画，不是和其他animate()一样在队列中执行，代码会先执行css函数，然后再去执行队列中的动画，这一点和setTimeout的任务队列有一些类似。
那么要实现上述需求，就需要使用到队列函数
使用如下代码可以实现

$('.box').animate({
    width: '200'
  })
  .animate({
    left: '100',
    width: '100'
  })
  .animate({
    height: '200'
  })
  .queue('fx', function(){                                // fx为默认参数，可以省略
    $('.box').css('background-color', 'blue');            // 将改变背景色的动画加入队列
    $('.box').dequeue();                                  // 执行并移出队列
  })
  .animate({
    height: '100',
    top: '100'
  })
......

代码执行结果

animate3.gif