一鍵實現優雅的元素淡出動畫

在 Web 交互設計中，讓元素「慢慢消失」而非瞬間隱藏，能顯著提升用戶體驗。本教程演示如何用 jQuery animate() 方法通過漸變 opacity 實現平滑淡出效果。

核心代碼

$(document).ready(function () {
    $(".pane").click(function () {
        $(this).animate({
            opacity: "hide"   // 等同於 opacity: 0 並最終 display: none
        }, "slow");           // 內置速度關鍵字：slow(600ms) / normal(400ms) / fast(200ms)
    });
});

關鍵點解析

• opacity: "hide"：jQuery 特殊值，動畫結束後自動設置 display: none，佔位空間釋放；若僅需透明不佔位，改用 opacity: 0 並手動控制 display。
• 速度控制：除關鍵字外，可傳入毫秒數（如 800）或自定義 easing 函數（需 jQuery UI/easing 插件）。
• this 上下文：事件處理函數內 $(this) 精確指向被點擊的 .pane 元素，支持多實例復用。

進階變體：淡入/切換/回調

// 淡入
$(".pane").fadeIn("slow");           // 內置快捷方法
$(this).animate({opacity: "show"}, "slow");

// 點擊切換顯示/隱藏
$(this).fadeToggle("slow");

// 動畫完成後執行回調（如移除 DOM）
$(this).animate({opacity: "hide"}, "slow", function(){
    $(this).remove();
});

瀏覽器兼容性提示

jQuery 1.x/2.x/3.x 全版本支持。IE6-8 需確保元素有 hasLayout（如設置 zoom:1 或寬高）以正確渲染透明度動畫。

掌握這一模式，即可為任何 DOM 元素賦予絲滑的進退動畫，構建更有層次感的交互界面。