本文為 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(速度, 回調函數);- 示例：
<button id="showBtn">顯示</button>
<button id="hideBtn">隱藏</button>
<div id="box" style="width:100px; height:100px; background-color:red; display:none;"></div>
<script>
$("#showBtn").click(function() {
$("#box").show(500); // 500 毫秒顯示
});
$("#hideBtn").click(function() {
$("#box").hide(500, function() {
alert("元素已隱藏");
});
});
</script>
.toggle()
- 功能：根據當前顯示狀態，在
.show()和.hide()之間切換。 - 語法：
$(選擇器).toggle(速度, 回調函數);
- 示例：
<button id="toggleBtn">切換顯示狀態</button>
<div id="box" style="width:100px; height:100px; background-color:blue;"></div>
<script>
$("#toggleBtn").click(function() {
$("#box").toggle(300);
});
</script>
.fadeIn() 和 .fadeOut()
- 功能：通過改變透明度 (opacity) 實現淡入淡出的效果。
- 語法：
$(選擇器).fadeIn(速度, 回調函數);
$(選擇器).fadeOut(速度, 回調函數);
- 示例：
<button id="fadeInBtn">淡入</button>
<button id="fadeOutBtn">淡出</button>
<div id="box" style="width:100px; height:100px; background-color:green; display:none;"></div>
<script>
$("#fadeInBtn").click(function() {
$("#box").fadeIn(400);
});
$("#fadeOutBtn").click(function() {
$("#box").fadeOut(400);
});
</script>
.slideDown() 和 .slideUp()
- 功能：實現元素高度的動畫變化，多用於手風琴效果 (Accordion)。
- 語法：
$(選擇器).slideDown(速度, 回調函數);
$(選擇器).slideUp(速度, 回調函數);
- 示例：
<button id="slideBtn">切換滑動效果</button>
<div id="panel" style="width:100px; height:100px; background-color:purple; display:none;"></div>
<script>
$("#slideBtn").click(function() {
$("#panel").slideToggle(500);
});
</script>
自訂動畫效果 .animate()
動畫的基本語法
.animate() 可以創建自訂的動畫，允許操作 CSS 屬性，例如位置、尺寸、透明度等。
$(選擇器).animate({
屬性1: 值,
屬性2: 值
}, 速度, 緩動效果, 回調函數);
- 示例：
<button id="moveBtn">移動盒子</button>
<div id="box" style="position:absolute; width:50px; height:50px; background-color:orange;"></div>
<script>
$("#moveBtn").click(function() {
$("#box").animate({
left: "250px",
top: "100px",
opacity: 0.5,
width: "100px",
height: "100px"
}, 1000, "swing", function() {
alert("動畫完成！");
});
});
</script>
動畫選項 (速度與回調)
- 速度參數：
- 以毫秒為單位 (例如 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 提供了豐富且靈活的動畫方法，讓開發者能輕鬆為網頁增添動態效果。
在動態效果中，適度使用動畫能提升用戶體驗，但過度使用則可能影響頁面性能與用戶視覺舒適度。
建議初學者多多嘗試不同的動畫方法，並在實際項目中靈活運用這些技巧，讓你的網站變得更具吸引力和互動性！