jq动画队列

queue()

　　queue()方法可以接受一个可选参数——一个含有队列名的字符串。该参数默认是'fx'

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">开始动画</button>
<button id="reset">恢复</button>
<span id="result"></span>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#btn').click(function(event){
    setInterval(function(){
        $('#result').html('队列数是:' +$('#box').queue().length)
    },100)
  $('#box').animate({'left':'100px'},1000).animate({'width':'200px'},1000).animate({'left':'0'},1000).animate({'width':'100px'},1000);
});
</script>

queue(callback(next))

　　queue()方法可以接受一个回调函数作为参数，表示将要添加到队列中的新函数

　　[注意]queue()方法中的回调函数中，可以进行样式变换等，但不可以添加动画效果

　　由下面代码执行结果可以看出，队列执行完函数后，队列后面的动画效果被停止，这时就需要用到下面要介绍的dequeue()方法

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">开始动画</button>
<button id="reset">恢复</button>
<span id="result"></span>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#btn').click(function(event){
    setInterval(function(){
        $('#result').html('队列数是:' +$('#box').queue().length)
    },100)
  $('#box').animate({'left':'100px'},1000).animate({'width':'200px'},1000);
  $('#box').queue(function(){
      $('#box').css('background','lightgreen');
  })
  $('#box').animate({'left':'0'},1000).animate({'width':'100px'},1000);//没有执行
});
</script>

执行到这步就暂停了

dequeue()

　　dequeue()方法用来执行匹配元素队列的下一个函数

dequeue([queueName])

　　dequeue()方法可以接受一个可选参数——一个含有队列名的字符串，默认是'fx'

　　[注意]dequeue()方法本身也算队列的一员

　　

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">开始动画</button>
<button id="reset">恢复</button>
<span id="result"></span>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#btn').click(function(event){
    setInterval(function(){
        $('#result').html('队列数是:' +$('#box').queue().length)
    },100)
  $('#box').animate({'left':'100px'},1000).animate({'width':'200px'},1000);
  $('#box').queue(function(){
      $(this).css('background','lightgreen');
      $(this).dequeue();//执行之后，后面的那个远动就能接着执行了
  })
  $('#box').animate({'left':'0'},1000).animate({'width':'100px'},1000);

});
</script>

clearQueue()

　　与deQueue()方法相反，clearQueue()方法用来从队列中移除所有未执行的项

　　[注意]clearQueue()并不影响当前动画效果

clearQueue([queueName])

　　clearQueue()方法可以接受一个可选参数——一个含有队列名的字符串，默认是'fx'

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">开始动画</button>
<button id="btn1">停止动画</button>
<button id="reset">恢复</button>
<span id="result"></span>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#btn').click(function(event){
    setInterval(function(){
        $('#result').html('队列数是:' +$('#box').queue().length)
    },100)
  $('#box').animate({'left':'100px'},1000).animate({'width':'200px'},1000);
  $('#box').queue(function(){
      $(this).css('background','lightgreen');
      $(this).dequeue();
  })
  $('#box').animate({'left':'0'},1000).animate({'width':'100px'},1000);

});
$('#btn1').click(function(event){
    $('#box').clearQueue();//停止动画
})
</script>

原文链接：http://www.cnblogs.com/xiaohuochai/p/5958082.html