第13章動畫設計動畫可以更直觀更生動的表現設出計者的意圖。制作動畫可以通過專業的動畫軟件來制作，如Flash等。現在網頁上動畫所占的成分越來越大。jQuery除了可以實現前面章節所完成的效果外，還可以以一定程度來實現動畫效果。本章我們講解利用jQuery在網頁上制作動畫。13.1jQuery動畫基礎本節我們將介紹利用jQuery實現動畫效果的基礎知識。13.1.1jQuery動畫函數jQuery的動畫函數總共分成四類：（1）基本動畫函數：既有透明度漸變，又有滑動效果，是最常用的動畫效果函數。（2）滑動動畫函數：僅適用滑動漸變動畫效果。（3）淡入淡出動畫函數：僅適用透明度漸變動畫效果。（4）自定義動畫函數：作為上述三種動畫函數的補充和擴展。下面將這幾種動畫函數總結一下。首先是基本動畫函數，參考表所示。滑動動畫函數請參考表所示。淡入淡出動畫函數請參考表所示。自定義動畫參數請參考表所示。13.1.2jQuery動畫簡單例子下面用一個自定義動畫的簡單例子來看一下jQuery制作動畫過程。在這個例子中我們所要達成的效果是：在頁面上垂直擺放了幾個超鏈接，當將鼠標懸停在其中一個超鏈接上時這個超鏈接動態向右縮進，當鼠標移開超鏈接時它恢復到原來的位置。實現原理就是利用了前面總結的自定義動畫函數animate()，并在這個函數中修改超鏈接的padding-left屬性，而且給定了動畫持續時間，效果如圖所示。為了實現這個效果，我們在HTML靜態頁面部分創建列表嵌套超鏈接。然后，引入jQuery庫文件：<scripttype="text/javascript"src="jslib/jquery-1.6.js"></script>最后，加上Javascript功能代碼。效果如圖所示。13.2jQueryUI中實現的動畫效果在jQueryUI中提供了多種動畫效果供我們參考。這些動畫效果除了前面介紹的基本動畫效果、滑動效果、淡入淡出效果外，還有百葉窗效果、跳躍效果、縮減效果、移動效果、分裂效果、折疊效果、高亮淡入淡出效果、脈沖閃爍效果、擺動效果等。這一節逐一介紹它們的實現。13.2.1jQueryUI動畫特效使用首先，參照jQueryUI中給出的例子來看一下如何使用動畫特效。這個例子在jQueryUI的demos文件下的show子文件夾中。這個例子使用了jQueryUI提供的各種特效顯示一個消息層。頁面的初始加載效果如圖所示。13.2.2百葉窗效果百葉窗效果使用了jQueryUI的jquery.effects.core.js和jquery.effects.blind.js文件。第一個文件是動畫特效的核心文件，里面提供了一些實現特效的基本和常用操作函數。第二個文件是實現百葉窗效果的插件文件。它的設計思想是根據百葉窗打開方向設定動畫的操作高度或者寬度，然后利用自定義動畫實現動畫效果。在這里使用了jQuery的animate()自定義動畫函數來完成動畫效果；css()樣式設定函數修改消息部分的樣式，主要是寬和高兩個參數；hide()隱藏函數，將消息部分隱藏起來；height()獲取元素高度函數；show()顯示元素函數；width()獲取元素寬度函數。主要設計思路是根據動畫顯示方向（縱向或橫向），通過自定義動畫的特效將消息部分的高或者寬調整為原始大小。效果如圖1和圖2所示。圖1圖213.2.3跳躍效果這個動畫效果需要應用到動畫特效的核心文件和跳躍效果的插件文件jquery.effects.bounce.js。它的設計思想是通過設定動畫跳躍的行為參數、跳躍次數、跳躍高度、跳躍用時、循環調用自定義動畫實現跳躍過程。所謂跳躍實際上是通過變換設定元素的頂端坐標值來完成。這里主要使用了jQuery的animate()自定義動畫函數；css()樣式設定函數；show()顯示元素函數。主要設計思路是通過不斷改變消息部分的頂端坐標位置來實現跳躍動畫效果。效果如圖所示。13.2.4縮減效果這個動畫效果需要應用到動畫特效的核心文件和縮減效果的插件文件jquery.effects.clip.js。它的設計思想是設定元素起始出現位置，即元素高度的一半，然后元素的上下兩部分依次向兩邊展開。效果如圖所示。13.2.5移動效果這個動畫效果需要應用到動畫特效的核心文件和移動效果的插件文件jquery.effects.drop.js。它的設計思想類似跳躍效果，只是在移動過程中通過一次自定義動畫將元素起始左端位置加上一定的像素值使元素向右移動。效果如圖所示。13.2.6分裂效果這個動畫效果需要應用到動畫特效的核心文件和分裂效果的插件文件jquery.effects.explode.js。它的設計思想是復制多個元素，元素個數按照動畫排列的行和列數決定，將復制出的多個元素通過自定義動畫變換坐標位置由顯示區域遠端向中間移動完成效果。效果如圖所示。13.2.7折疊效果這個動畫效果需要應用到動畫特效的核心文件和折疊效果的插件文件jquery.effects.fold.js。它的設計思想是按照一定的折疊方向和折疊比例將元素用自定義動畫多次修改坐標位置實現。效果如圖1和圖2所示。圖1圖213.2.8高亮淡入淡出效果這個動畫效果需要應用到動畫特效的核心文件和高亮效果的插件文件jquery.effects.highlight.js。它的設計思想比較簡單就是頻繁更換背景色及透明度來實現效果。效果如圖所示。13.2.9脈沖閃爍效果這個動畫效果需要應用到動畫特效的核心文件和閃爍效果的插件文件jquery.effects.pulsate.js。它的設計思想是利用自定義動畫函數頻繁變化元素透明度來完成效果。效果如圖所示。13.2.10擺動效果這個動畫效果需要應用到動畫特效的核心文件和擺動效果的插件文件jquery.effects.shake.js。它的設計思想和跳躍效果及本相同，只是擺動方向為左右方向，并且在擺動過程中的第一次擺動、最后一次擺動及中間的擺動距離考慮的設定較跳躍要復雜。效果如圖1和圖2所示。圖1圖213.3小結jQuery動畫效果能夠給用戶更愉悅的體驗，也讓用戶能看到更生動的頁面。本章主要介紹了jQuery動畫函數，以及利用動畫函數產生動畫效果，及jQueryUI提供的動畫效果