深入學習jQuery動畫隊列 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　隊列實現是jQuery非常棒的一個拓展，使用動畫隊列可以使動畫更容易實現。本文將詳細介紹jQuery動畫隊列

queue()

　　queue()方法用來顯示在匹配的元素上的已經執行的函數隊列

queue([queueName])

　　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>