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