前端編程提高之旅（十六）----jquery中的動畫

    上一篇文章對jquery中的事件做了總結，這篇文章主要對jquery中的動畫做一下總結歸類。最近微信端分享中，有很多頁面交互及動畫做的非常受歡迎，非常符合移動端體驗。看似花哨的動畫從本質上都脫離不了編寫動畫的基本方法。樂帝將jquery動畫部分內容，做了一個簡單的歸類。

    如下圖：

    如上圖所示，無論多複雜的動畫，從實現上都採用這些最底層的動畫方法。本篇將從動畫方法和與動畫狀態有關的方法講起。

   一、動畫方法

   1.同時改變高、寬、不透明度方法

   這裏涉及show和hide方法，動畫的結果是設置元素樣式display屬性是否爲none，然而既然說是動畫，就要照顧到中間狀態。這裏動畫方法參數都可以設置持續時間與執行完的回調方法。那麼可以設置一個比較大的時間，來看看show方法與hide方法動畫執行中是如何過渡的。

  典型用法如下例：

  HTML結構：

<div id="panel">
	<h5 class="head">什麼是jQuery?</h5>
	<div class="content">
		jQuery是繼Prototype之後又一個優秀的JavaScript庫，它是一個由 John Resig 創建於2006年1月的開源項目。jQuery憑藉簡潔的語法和跨平臺的兼容性，極大地簡化了JavaScript開發人員遍歷HTML文檔、操作DOM、處理事件、執行動畫和開發Ajax。它獨特而又優雅的代碼風格改變了JavaScript程序員的設計思路和編寫程序的方式。
	</div>
</div>

  jquery代碼：

$("#panel h5.head").click(function(){
    	if($(this).next().is(':visible')){
            $(this).next().hide(10000);
    	}else{
    		$(this).next().show(10000);
    	}     
	})

      由於設置動畫時間較長，可以很明顯看出，動畫過程中寬度、高度、透明度這三組值同時有一個變化的過程。

   2.只改變元素不透明度的方法

   這裏涉及一組方法fadeIn方法與fadeOut方法，顧名思義，淡入與淡出效果，主要通過改變元素透明度實現。仍然延續上例，將判斷語句中方法改成fadeIn與fadeOut方法。

$("#panel h5.head").click(function(){
    	if($(this).next().is(':visible')){
            $(this).next().fadeOut(10000);
    	}else{
    		$(this).next().fadeIn(10000);
    	}     
	})

      通過觀察chrome控制檯元素樣式變化，會發現透明度在快速變化，最後狀態爲display爲none或block。

   3.只改變元素高度的方法

   slideUp方法與slideDown方法，這一組方法在動畫執行過程中是通過改變元素高度來實現的。仍然延續上例，只將方法做修改。

$("#panel h5.head").click(function(){
    	if($(this).next().is(':visible')){
            $(this).next().slideUp(10000);
    	}else{
    		$(this).next().slideDown(10000);
    	}     
	})

           通過在瀏覽器控制檯觀察，很容易驗證這組方法確實改變元素高度來過渡動畫，但樂帝也發現上下padding也連帶有個減小的過程。

   4.自定義動畫

   animate方法與以上三組方法的區別在於，上述三組方法都脫身與animate方法，animate方法是動畫的通用方法。animate方法可以有三個參數，第一個參數爲動畫執行要改變的樣式終點值，第二個參數爲動畫執行時間，第三個爲動畫執行完的回調。

   不難看出，上述三組方法與animate方法的區別僅在於，三組方法動畫執行要改變樣式終點值形式已經定義好了，而animate仍需要指定。這看似麻煩的指定同時也給我們設置動畫提供了極大的自由度。

$(this).animate({width: "0px"}, 3000,function(){console.log("animation is done")}); 

     這裏自定義動畫還可以設置累加/累減的方法：

$(this).animate({width: "-=50px"}, 3000,function(){console.log("animation is done")});  

   5.多重動畫

  多重動畫只是在以上四組方法的基礎上，進行業務上的排列組合構成。

  6.狀態切換動畫

  思維導圖提到的其中三種方法：toggle方法、slideToggle方法、fadeToggle方法。這三種方法都可以切換可見性。fadeTo方法則是設置透明度。

  以slideToggle使用爲例：

 $(this).next().slideToggle();

      二、與動畫狀態有關的方法

   1.判斷動畫狀態的方法

   這裏並沒有獨立的方法，而是通過is方法判斷。

$('#mover').is(":animated")

    2.延遲動畫

  實現動畫延遲的方法爲delay方法，參數傳入需要延遲的時間。

  典型用法：

$(this).animate({left: "400px", height:"200px" ,opacity: "1"}, 3000)
					 .delay(1000)
					 .animate({top: "200px" , width :"200px"}, 3000 )
					 .delay(2000)
					 .fadeOut("slow");

     3.停止動畫

  stop方法用於停止動畫，可以傳入兩個布爾值做參數。第一個參數代表是否要清空未執行的動畫隊列，第二個參數代表是否直接將當前正在執行的動畫跳轉到末狀態。

  常見場景當光標移入、移出時動畫還沒有結束，此時可以停止動畫，執行此時邏輯添加的動畫：

<pre name="code" class="javascript">$("#panel").hover(function() {
		  $(this).stop().animate({height : "150",width : "300"} , 200 );
	  },function() {
		  $(this).stop().animate({height : "22",width : "60" } , 300 );
	  });