jquery 动画队列

queue()

queue()方法用来显示在匹配的元素上的已经执行的函数队列

//html
  <button class="btn">队列</button>
  <span class="box"></span>
  <div id="book"></div>
// css
#book{
  position:relative;
  width:100px;
  height:100px;
  background:red;
}
// js
$('.btn').click(function(){
  $('.box').html('队列数是:4')
  $('#book').animate({
    left: '100px'
  }, 1000,function(){
    $('.box').html('队列数是:' +($('#book').queue().length - 1))
  })
 .animate({
    left: '100px',
    top: '100px'
  }, 1000,function(){
    $('.box').html('队列数是:' +($('#book').queue().length - 1))
  })
 .animate({
    left: '0',
    top: '100px'
  }, 1000,function(){
    $('.box').html('队列数是:' +($('#book').queue().length - 1))
  })
 .animate({
    left: '0',
    top: '0'
  }, 1000,function(){
    $('.box').html('队列数是:' +($('#book').queue().length - 1))
  })  
})

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

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

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

.clearQueue

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

.finish

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

.stop( [clearQueue ] [, jumpToEnd ] )

停止当前正在运行的动画

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

dequeue()

dequeue()方法用来执行匹配元素队列的下一个函数
dequeue()方法可以接受一个可选参数——一个含有队列名的字符串