queue()

queue()方法用來顯示在匹配的元素上的已經(jīng)執(zhí)行的函數(shù)隊列

queue([queueName])

queue()方法可以接受一個可選參數(shù)——一個含有隊列名的字符串。

<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('隊列數(shù)是:' +$('#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()方法可以接受一個回調(diào)函數(shù)作為參數(shù)，表示將要添加到隊列中的新函數(shù)
[注意]queue()方法的回調(diào)函數(shù)中，可以進行樣式變換等，但不可以增加動畫效果
由下面代碼執(zhí)行結果可以看出，隊列執(zhí)行完函數(shù)后，隊列后面的動畫效果被停止，這時就需要用到下面
要介紹的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('隊列數(shù)是:' +$('#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()方法用來執(zhí)行匹配元素隊列的下一個函數(shù)

dequeue([queueName])

dequeue()方法可以接受一個可選參數(shù)——一個含有隊列名的字符串

[注意]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('隊列數(shù)是:' +$('#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()方法用來從列隊中移除所有未執(zhí)行的項

[注意]clearQueue()并不影響當前動畫效果

clearQueue([queueName])

clearQueue()方法可以接受一個可選參數(shù)——一個含有隊列名的字符串

<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('隊列數(shù)是:' +$('#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>

.finish

當.finish()在一個元素上被調(diào)用，立即停止當前正在運行的動畫和所有排隊的動畫（如果有的話），并且他們的CSS屬性設置為它們的目標值（注：就是所有動畫的目標值）。所有排隊的動畫將被刪除。（停止當前動畫，并清除動畫隊列中所有未完成的動畫,最終展示動畫隊列最后一幀的最終狀態(tài)。）

.stop( [clearQueue ] [, jumpToEnd ] )

停止當前正在運行的動畫

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

當一個元素調(diào)用.stop()，當前正在運行的動畫（如果有的話）立即停止。例如，一個元素用.slideUp()隱藏的時候，調(diào)用.stop()，該元素依然會有一部分是處于顯示狀態(tài)的。由于元素上的動畫尚未執(zhí)行完成，所以動畫完成時執(zhí)行的回調(diào)函數(shù)是不會被調(diào)用的。

如果同一元素調(diào)用多個動畫方法，尚未被執(zhí)行的動畫被放置在元素的效果隊列中。這些動畫不會開始，直到第一個完成。當調(diào)用.stop()的時候，隊列中的下一個動畫立即開始。如果clearQueue參數(shù)提供true值,那么在隊列中的動畫其余被刪除并永遠不會運行。

如果提供jumpToEnd參數(shù)，并且值為true時，當前動畫將停止，但該元素上的 CSS 屬性會被立刻修改成動畫的目標值。用上面的.slideUp()為例子,該元素將立即隱藏。如果提供回調(diào)函數(shù)將立即被調(diào)用。

從jQuery 1.7開始, 如果第一個參數(shù)是一個字符串， 那么只有該參數(shù)所表示的隊列中的動畫才會被停止。

   clearQueue(default: false)
   jumpToEnd(default: false)//默認，停止當前動畫

   clearQueue(default: true)
   jumpToEnd(default: false)//停在原地，清除隊列

   clearQueue(default: false)
   jumpToEnd(default: true)//跳著位移

   clearQueue(default: true)
   jumpToEnd(default: true)//跳到本段位移的末端，清除隊列

參考：https://www.cnblogs.com/xiaohuochai/p/5958082.html
https://www.jquery123.com/queue/
https://links.jianshu.com/go?to=http%3A%2F%2Fjs.jirengu.com%2Fpeyexidake%2F1%2Fedit