**上一篇文章對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 ); }); ~~~