jQuery 選擇器與動畫方法深度解析

代碼片段解讀

// 淡入動畫：300 毫秒內完成
$(".menu-overlay").stop().fadeIn(300);
// 淡出動畫：150 毫秒內完成
$(".menu-overlay").stop().fadeOut(150);

// 後代選擇器示例
$("#products_list .pic img");
$("#f11 .pic img");
$(".nav-second a img");

核心知識點

1. `.stop()` 的作用

防止動畫隊列堆疊。當用戶快速觸發懸停/移出時，`.stop()` 會停止當前正在運行的動畫，直接開始新動畫，避免界面閃爍或延遲響應。

2. `fadeIn` / `fadeOut` 參數

參數單位為毫秒（非秒）。示例中 300 表示 0.3 秒完成淡入，150 表示 0.15 秒完成淡出。

3. 空格分隔的後代選擇器

• `#products_list .pic img`：選擇 ID 為 `products_list` 元素內部所有 class 為 `pic` 的元素內部所有 `img` 標籤，不限層級深度。
• `#f11 .pic img`、` .nav-second a img` 同理，分別以 ID `f11`、class `nav-second` 為起點查找後代。

最佳實踐建議

• 優先使用 ID 選擇器（`#id`）作為查找起點，性能最佳。
• 避免過度嵌套的後代選擇器，必要時改用 `.find()` 鏈式調用提升可讀性。
• 動畫前加 `.stop(true, true)` 可同時清除隊列並跳轉到動畫結束狀態。