jQuery 動態效果總覽：顯示隱藏、滑動、淡入淡出與自訂動畫
jQuery 函式庫提供了幾個可以在網頁上增添動畫的技巧，包括經常使用的簡單型動畫，以及能客製化的自訂動畫效果。
精簡版沒有這些方法
Effects 是一個獨立的模組，精簡版（slim） 並不包含它。若要使用本篇的方法，請改載標準版。
顯示、隱藏與切換
最基本的一組動畫，直接控制元素在畫面上出現與否。隱藏之後不會再佔用版面空間，周圍的內容會往上遞補。
| 方法 | 說明 |
|---|---|
show() | 顯示指定的 DOM。 |
hide() | 隱藏指定的 DOM。 |
toggle() | 切換指定的 DOM 進行顯示與隱藏。 |
詳細參數請見 顯示、隱藏與切換 。
滑動
靠改變元素的高度做出下拉與上捲的效果，展開式選單、收合區塊與手風琴介面幾乎都靠它。動畫過程中版面高度不斷變化，周圍的內容會跟著位移。
| 方法 | 說明 |
|---|---|
slideDown() | 調整高度來滑動顯示指定的 DOM，即下拉。 |
slideUp() | 調整高度來滑動隱藏指定的 DOM，即上捲。 |
slideToggle() | 切換指定的 DOM 進行滑動顯示與隱藏。 |
詳細參數請見 滑動 。
淡入、淡出
改變的是不透明度，讓元素漸漸浮現或消失，是四組裡視覺上最柔和的一種。不透明度不牽動版面配置，所以播起來通常也最順。
| 方法 | 說明 |
|---|---|
fadeIn() | 對指定的 DOM 進行隱藏到可見的不透明度補間動畫，即淡入。 |
fadeOut() | 對指定的 DOM 進行可見到隱藏的不透明度補間動畫，即淡出。 |
fadeTo() | 對指定的 DOM 設定不透明度的指定值。 |
fadeToggle() | 切換指定的 DOM 進行淡入、淡出效果。 |
詳細參數請見 淡入、淡出 。
自訂動畫
前面三組不敷使用時就輪到它，可以自行指定要動畫化哪些 CSS 屬性、什麼時候開始與中止。這也是唯一需要理解 動畫佇列 的一組。
| 方法 | 說明 |
|---|---|
animate() | 自訂動畫效果。 |
delay() | 延遲動畫效果。 |
stop() | 佇列動畫與動畫處置。 |
詳細參數請見 自訂動畫 。
和 CSS 動畫怎麼分工
單純的視覺過場交給 CSS 的 transition 或 animation ，效能較好也不必載入額外程式；需要依邏輯決定動畫時機、串接多段動畫，或在動畫結束後接續執行工作時，jQuery 的動畫方法會比較好寫。實務上，這些效果通常搭配 事件 一起使用。
常見問題
jQuery 動畫和 CSS 動畫該用哪個？
單純的視覺過場交給 CSS 的 transition 或 animation，效能較好也不必載入額外程式。需要依邏輯決定動畫時機、串接多段動畫或在結束後接續執行工作時，jQuery 的動畫方法會比較好寫。
這些動畫方法可以串在一起嗎？
可以。jQuery 會把同一個元素上的動畫排進佇列依序播放，因此串接多個方法會一個接一個執行，中間還能用 delay() 插入等待。
duration 沒填會怎樣？
會使用預設的 400 毫秒。也可以填入 'slow' 或 'fast' 這兩個關鍵字，分別對應 600 與 200 毫秒。
為什麼精簡版的 jQuery 沒有這些方法？
精簡版（slim） 刻意拿掉了 Ajax 與 Effects 兩個模組以縮小體積，因此本篇介紹的方法都不會存在，需要用到就得改載標準版。
動畫還沒播完就再次觸發怎麼辦？
動畫會被排進佇列而不斷累積，看起來就像反覆播放。可以先用 stop() 清掉佇列中未播放的動畫，再開始新的動畫。
延伸閱讀
參考資料：jQuery API：Effects