FacebookLinkedInTweet更新日期： 2025 年 3 月 9 日
本文為 jQuery 基本介紹系列文，第 9 篇：
如何使用jQuery CDN 建立互動網頁
初學者指南：掌握 jQuery DOM 操作技巧
初學者指南：深入了解 jQuery 選擇器
使用jQuery 刪除第一個子元素的實作教學
初學者指南：深入了解 jQuery 事件處理
如何在jQuery 中使用事件監聽器addEventListener
了解jQuery 中$().each(function(){}) 與$.each() 的差異
jQuery 與fetch 的非同步請求方法介紹
初學者指南：掌握 jQuery 動畫效果 👈進度
初學者指南：深入了解 jQuery 中的 this 關鍵字
初學者指南：深入了解 jQuery .offset() 方法
在網頁開發中，動畫效果 (Animation) 不僅能讓網站變得更加生動有趣，還能有效提升用戶體驗 (User Experience, UX)。
通過適當的動畫，開發者可以引導用戶視線、展示視覺反饋、或讓網頁交互更加流暢自然。
jQuery 作為一個輕量級的 JavaScript 庫，提供了豐富且易用的動畫方法，讓開發者能輕鬆為網頁元素添加動態效果。
本篇文章將帶你深入了解 jQuery 動畫效果的使用方法，從基本的顯示與隱藏，到複雜的自訂動畫，並提供實用的代碼範例，讓你快速上手並靈活運用在實際開發中。
什麼是 jQuery 動畫效果？
jQuery 動畫效果是指使用 jQuery 提供的方法，為網頁元素添加各種動態效果，例如淡入淡出、滑動顯示、大小變化等。
jQuery 通過簡單的語法，將複雜的動畫過程進行封裝，使開發者只需幾行代碼就能實現精美的動畫效果。
顯示與隱藏效果
.show() 和 .hide()
功能：顯示或隱藏元素，支持動畫過渡。
語法：
$(選擇器).show(速度, 回調函數);
$(選擇器).hide(速度, 回調函數);
示例：
.toggle()
功能：根據當前顯示狀態，在 .show() 和 .hide() 之間切換。
語法：
$(選擇器).toggle(速度, 回調函數);
示例：
.fadeIn() 和 .fadeOut()
功能：通過改變透明度 (opacity) 實現淡入淡出的效果。
語法：
$(選擇器).fadeIn(速度, 回調函數);
$(選擇器).fadeOut(速度, 回調函數);
示例：
.slideDown() 和 .slideUp()
功能：實現元素高度的動畫變化，多用於手風琴效果 (Accordion)。
語法：
$(選擇器).slideDown(速度, 回調函數);
$(選擇器).slideUp(速度, 回調函數);
示例：
自訂動畫效果 .animate()
動畫的基本語法
.animate() 可以創建自訂的動畫，允許操作 CSS 屬性，例如位置、尺寸、透明度等。
$(選擇器).animate({
屬性1: 值,
屬性2: 值
}, 速度, 緩動效果, 回調函數);
示例：
動畫選項 (速度與回調)
速度參數：
以毫秒為單位 (例如 500)。
或使用 "slow" (600ms) 和 "fast" (200ms) 等預設值。
回調函數 (Callback Function)：
動畫結束後執行的函數。
適合用於動畫完成後的邏輯處理。
動畫排隊與停止
排隊動畫：動畫會依照調用順序逐個執行。
停止動畫：
$(選擇器).stop([清空排隊],[跳到最終狀態]);
示例：
$("#box").stop(true, false);
預設動畫效果 (Easing)
Easing 決定動畫的速度變化方式 (如加速、減速)：
"linear": 動畫以恆定速度進行。
"swing" (預設): 動畫以先慢後快再慢的方式進行。
延遲與鏈式動畫 (Chaining)
延遲執行 .delay()：
$("#box").fadeIn(500).delay(1000).fadeOut(500);
鏈式動畫：
$("#box").slideDown(500)
.css("background-color", "red")
.fadeOut(500);
結語
jQuery 提供了豐富且靈活的動畫方法，讓開發者能輕鬆為網頁增添動態效果。
在動態效果中，適度使用動畫能提升用戶體驗，但過度使用則可能影響頁面性能與用戶視覺舒適度。
建議初學者多多嘗試不同的動畫方法，並在實際項目中靈活運用這些技巧，讓你的網站變得更具吸引力和互動性！