手把手教你用jQuery做動畫插件
51CTO推薦專題：jQuery給力插件大閱兵
CSS樣式屬性動畫
我們現在有很多的動畫方法，滑動、淡出淡入、還有其他的顯示隱藏動畫，但是我們對于精確的控制動畫以及動畫到底怎么發生的還不太了解。我們這就來介紹一個非常強大的jQuery函數，animate，這個方法可以讓你對任何的CSS屬性做動畫的效果。我們看看代碼：
- $('p').animate({
- padding:'20px',
- fontSize:'30px'
- },2000)
這段代碼會動畫操作所有的，將他們的邊距擴大到20px，將字體放大到30px，并且在2秒內完成。
animate方法中，我們需要先傳入一個對象作為參數，這個對象的內容就是你需要改變的CSS的屬性和他們的值。需要特別注意的一點就是，CSS屬性的名稱一定要寫成駝峰式的，也就是說要寫成backgroundColor而不是background-color這樣。
你可以傳入一個數字作為動畫持續的時間，也可以是slow normal fast這樣的字符串。CSS屬性的值可以是px，em，百分數，或者points。比如：100px,10em,50%,16pt。
更令人激動的是，寫入的值也是可以跟當前值相關的，你只需要在前面寫上+=或者-=就好了，然后jQuery會自動改寫當前的狀態。讓我們來試試看吧：
- $('#navigation li').hover(function() {
- $(this).animate({paddingLeft: <em></em>}, 200);
- }, function() {
- $(this).animate({paddingLeft: <em></em>}, 200);
- });
當鼠標經過的時候，就可以看見一個比較漂亮的變化了。
你也可以用很簡單的寫法來控制某些屬性的顯示隱藏或者交替：
- $('#disclaimer').animate({
- opacity: 'hide',
- height: 'hide'
- }, 'slow');
可以看見元素的變化。作為練習，你可以嘗試改改你能想到的任何屬性。animate方法還有一些更加強大的功能，RockUX會在后面的文章中講到。
顏色動畫
在你認識了animate方法之后，你可能也想改改元素的顏色。當然，顏色動畫有一點點的不同，因為顏色的值從開始到結束需要一些特別的計算。不想高度寬度移動的像素點那樣線性的變化，jQuery需要做一些額外的事情來進行顏色的變化。
顏色計算的函數沒有定義在基礎庫中。因為很多時候并不需要這樣的方法，而且為了保證庫的大小，也沒有加進去。所以我們需要一個插件：Color Animations plugin.
使用插件
官方的插件庫中有很多有用的插件。你可以通過名稱類別搜索，或者社區給插件的打分來尋找。
當你找到你感興趣的插件之后，可以下載然后放在你的項目中。在使用之前讀一讀readme文件或者文檔還是有必要的，但是一般是直接包含在自己的文檔中，就像包含其他的js文件一樣。
對于那些新的插件，大多都是通過文檔來找到他們的使用方法的。
在下載和放置好那個顏色函數的插件之后，你就可以動畫變化元素的顏色屬性了：
- $('#disclaimer').animate({'backgroundColor':'#ff9f5f'}, 2000);
這樣就很炫了吧。
緩動
緩動的意思就是在元素動態變化的時候，有一些加速和減速的效果，從而有一種真實的體驗的感覺。緩動通過一些數學算法來變化動畫的速度。因為我們使用jQuery，所以暫時不用去搞那些復雜的數學公式。
jQuery中有兩種類型的緩動，linear和swing。只要你使用jQuery做動畫的時候，都可以使用者兩種緩動類。他們兩個的區別我們通過下圖來表示：
swing緩動類從一個比較慢的速度開始，然后到結束的時候再減速，非常的優雅。視覺上來說，swing緩動看著比線性的linear要舒服很多，jQuery也會在你指定使用緩動之后默認使用swing。
舉個例子，當我嗎點擊之后動畫顯示***段落，他會變大然后縮小。我們先使用線性的讓他變大，然后使用swing來讓他縮?。?/p>
- $('p:first').toggle(function() {
- $(this).animate({'height':'+=150px'}, 1000, 'linear');
- }, function() {
- $(this).animate({'height':'-=150px'}, 1000, 'swing');
- });
這里面又不少jQuery的語法，我們來解釋一下：
我們通過選擇器來獲得***個段落
toggle事件綁定在***段落上
在處理函數中，this表示觸發事件的元素
***個處理函數使用了=+，表示高度增加150px，使用線性緩動
第二個處理函數使用-=，表示減少150px，使用swing緩動
如果這些你都搞清楚了，那么可以獎勵一下自己了，真不賴。
高級緩動類
緩動類可以提供一些很好的視覺效果，也能勝任很多任務。在swing和linear后面還有很多的緩動效果，可以通過這個插件easing plugin實現。
jQuery UI包含的插件
緩動的庫再jQuery UI中有包含。這個庫中包含一些常見的插件，包括顏色動畫，類的變換還有緩動。引入jQuery UI，你就不需要再一個個的去包含每一個插件了。
只需要下載這個庫，然后放在你的jQuery文件包含代碼之后就可以了。除了一些新的功能之外，緩動插件還提供了30多個緩動類。一個個解釋這些需要耗費大篇幅，也沒有必要，我們來看看下面的圖表就好了。
你可能注意到，有些算法都在圖形外面了，其實這也是一個效果，他最終都會回到原點的。
使用這些新的算法，我們只需要在緩動的地方給成這些名稱就好：
- $('p:first').animate({height: '+=300px'}, 2000, 'easeOutBounce');
- $('p:first').animate({height: '-=300px'}, 2000, 'easeInOutExpo');
- $('p:first').animate({height: 'hide'}, 2000, 'easeOutCirc');
- $('p:first').animate({height: 'show'}, 2000, 'easeOutElastic');
看到這個圖，你可能想知道這些緩動選項的名字從哪里來，或者哪里可以看見完整的名單。這些算法來自Robert Penner的緩動方程，這里有詳細的描述。
***的研究這些方程的方法就是去看源代碼。
動手吧
休息一下，然后去試試這個插件吧。或許你不會使用到每一個效果，但是對每個都有些了解，還是會在需要的時候快速做出判斷的。使用這些特效，會給你的頁面增色不少，而且也是成為一個高手必備的東西。
原文鏈接：http://rockux.com/archives/jquery%E4%B8%AD%E7%9A%84%E5%8A%A8%E7%94%BB
【編輯推薦】
