深入學習jQuery動畫控制

前面的話

　　jQuery動畫可以使用fade、hide、slide等方法實現基本動畫效果，可以使用animate實現自定義動畫，甚至可以使用queue實現動畫隊列。但是，卻缺少了對動畫控制的介紹。動畫產生后，描述動畫狀態、進行動畫延遲、操作動畫暫停等都是很重要的功能。本文將詳細介紹jQuery動畫控制

 

動畫狀態

　　當用戶快速在某個元素多次執行動畫時，會造成動畫累積的現象。這時，就需要引入動畫狀態這個概念。判斷元素是否處於動畫狀態中，如果處於，則不添加新動畫

is(':animated')

　　使用is(':animated')方法來判斷元素是否處於動畫狀態

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">按鈕一</button>
<button id="btn2">按鈕二</button>
<button id="reset">恢復</button>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#btn1').click(function(event){
  $('#box').animate({'left':'+=100px'});
});
$('#btn2').click(function(event){
    if(!$('#box').is(':animated')){
        $('#box').animate({'left':'+=100px'});        
    }
});
</script>

停止動畫

【stop()】

　　stop()方法用於停止匹配元素當前正在運行的動畫

stop([queue][,clearQueue][,jumpToEnd])

　　stop()方法可以接受3個可選參數，第一個參數queue表示停止動畫隊列的名稱；第二個參數clearQueue表示是否清空隊列中的動畫，默認值為false；第三個參數jumpToEnd表示是否當前動畫立即完成，默認值為false

【1】當stop()方法不接受任何參數時，將立刻停止當前動畫

　　對於hover動畫效果來說，經常出現用戶把光標移入元素時出發觸發動畫效果，但當前動畫沒有結束時，用戶已經將光標移出元素。這樣移入移出過快會導致動畫效果延遲

　　此時，只要在光標移入、移出動畫之前加入stop()方法就可以結束當前動畫，並立即執行隊列中下一個動畫

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="reset">恢復</button>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue">未設置stop的hover動畫效果</div>
<div id="box1" style="position:relative;height: 100px;width: 300px;background-color: lightgreen">設置stop的hover動畫效果</div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#box').hover(function(event){
    $(this).animate({'width':'400px'})
},function(){
    $(this).animate({'width':'300px'})
});
$('#box1').hover(function(event){
    $(this).stop().animate({'width':'400px'})
},function(){
    $(this).stop().animate({'width':'300px'})
});
</script>

【2】stop()參數clearQueue表示是否清空隊列中的動畫，默認值為false

　　當設置該參數為true時，則不僅停止當前動畫，而且會清空隊列中動畫

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">開始動畫</button>
<button id="btn1">停止當前動畫</button>
<button id="btn2">停止當前及后續動畫</button>
<button id="reset">恢復</button>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#btn').click(function(event){
  $('#box').animate({'left':'100px'},1000).animate({'width':'200px'},1000);
  $('#box').animate({'left':'0'},1000).animate({'width':'100px'},1000);
});
$('#btn1').click(function(event){
    $('#box').stop();
})
$('#btn2').click(function(event){
    $('#box').stop(true);
})
</script>

【3】stop()參數jumpToEnd表示是否當前動畫立即完成，默認值為false

　　當該參數設置為true時，當前動畫立即完成

　　stop()相當於stop(false,false)表示停止執行當前動畫，后續動畫接着進行

　　stop(true,false)表示停止執行當前動畫，后續動畫不再進行

　　stop(false,true)表示當前動畫立即完成，后續動畫接着進行

　　stop(true,true)表示當前動畫立即完成，后續動畫不再進行

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<input id="btn" type="button" value="開始動畫">
<button>stop()</button>
<button>stop(true,false)</button>
<button>stop(false,true)</button>
<button>stop(true,true)</button>
<input id="reset" type="button" value="恢復">
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#btn').click(function(event){
  $('#box').animate({'left':'100px'},1000).animate({'width':'200px'},1000);
  $('#box').animate({'left':'0'},1000).animate({'width':'100px'},1000);
});
$('button').click(function(event){
    jQuery.globalEval("$('#box')." + $(this).html());
})
</script>

【finish()】

　　finish()方法是另一種停止動畫的方法，它可以停止當前正在運行的動畫，刪除所有排隊的動畫，並完成匹配元素所有的動畫

finish([queue])

　　finish()方法可以接受一個可選參數queue表示停止動畫隊列的名稱

　　finish()方法和stop(true,true)很相似，stop(true,true)將清除隊列，並且目前的動畫跳轉到其最終值。但是，不同的是，finish()會導致所有排隊的動畫的CSS屬性跳轉到他們的最終值

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<input id="btn" type="button" value="開始動畫">
<button>finish()</button>
<button>stop(true,true)</button>
<input id="reset" type="button" value="恢復">
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#btn').click(function(event){
  $('#box').animate({'left':'100px'},1000).animate({'width':'200px'},1000);
  $('#box').animate({'left':'0'},1000).animate({'width':'100px'},1000);
});
$('button').click(function(event){
    jQuery.globalEval("$('#box')." + $(this).html());
})
</script>    

動畫延遲

　　delay()方法可以用來設置一個延時來推遲執行隊列中后續的項

delay(duration[,queueName])

　　duration是delay()方法的必須參數，用於設定下個隊列推遲執行的時間，持續時間是以毫秒為單位的，默認值為'normal'，代碼400毫秒的延時；'fast'和'slow'分別代表200和600毫秒的延時

　　queueName是delay()方法的可選參數，它是一個隊列名的字符串，默認是動畫隊列fx

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">開始動畫</button>
<button id="reset">恢復</button>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#btn1').click(function(event){
  $('#box').animate({'left':'300px'}).delay(500).animate({'width':'100px'});
});
</script>

全局控制

【jQuery.fx.off】

　　jQuery.fx.off屬性可以用來對jQuery動畫進行全局控制，默認為undefined，當這個屬性設置為true的時候，調用時所有動畫方法將立即設置元素為他們的最終狀態，而不是顯示效果

　　當然，動畫可以通過設置這個屬性為false重新打開

　　[注意]由於該屬性是全局性的，因此在沒有動畫正在運行或停止所有動畫時，此屬性的變化才能生效

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">開始動畫</button>
<button id="btn2">開閉動畫</button>
<button id="reset">恢復</button>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#btn1').click(function(event){
  $('#box').animate({'left':'300px'},1000).animate({'width':'100px'},1000);
});
$('#btn2').click(function(){
    $.fx.off = !$.fx.off;
});
</script>

【jQuery.fx.interval】

　　jQuery.fx.interval屬性可以改變動畫的頻率，以毫秒為單位

　　這個屬性可以設置動畫每秒運行幀數，默認是13毫秒。該屬性值越小，在速度較快的瀏覽器中，動畫執行的越流暢，但是會影響程序的性能並且占用更多的CPU資源

　　[注意]由於該屬性是全局性的，因此在沒有動畫正在運行或停止所有動畫時，此屬性的變化才能生效

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">開始動畫</button>
<button id="btn2">改變動畫頻率</button>
<button id="reset">恢復</button>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#btn1').click(function(event){
  $('#box').animate({'left':'300px'},1000).animate({'width':'100px'},1000);
});
$('#btn2').click(function(){
    $.fx.interval = 100;
});
</script>