jQuery 顯示與隱藏：show()、hide() 與 toggle()

以 CSS 的 display 屬性控制顯示與否，是 jQuery 動態效果 中最基本的一組方法。

show()

指定 DOM 進行顯示。

show(duration, complete);

參數

功能	說明	型別	範例
duration	效果的速度	String、Number	'slow'、'fast'、400
complete	結束後的執行事項	Function	function() {}

範例

HTML

<div id="Dom" style="display: none">DOM</div>
<button id="Btn">顯示</button>

JavaScript

$('#Btn').on('click', function () {
  $('#Dom').show(400, function () {
    console.log('顯示完成');
  });
});

hide()

指定 DOM 進行隱藏。

hide(duration, complete);

參數

與前述相同。

隱藏之後不佔位置

hide() 是把 display 設為 none ，元素會完全從排版中移除。若只是想讓元素看不見但保留位置，請改用 fadeTo() 調整不透明度。

toggle()

指定 DOM 進行顯示與隱藏的切換。它依元素當下的狀態決定要顯示還是隱藏，很適合做開關型的互動。

toggle(duration, complete);

參數

與前述相同。

範例

HTML

<div id="Dom">DOM</div>
<button id="Btn">切換</button>

JavaScript

$('#Btn').on('click', function () {
  $('#Dom').toggle('fast');
});

常見問題

hide 之後元素還佔位置嗎？

不會。它是把 CSS 的 display 設為 none，元素會完全從排版中移除，不再佔用空間。若只想讓元素看不見但保留位置，應該改用不透明度。

duration 可以填哪些值？

可以填毫秒數，也可以填 'slow' 或 'fast' 這兩個關鍵字，分別對應 600 與 200 毫秒。省略時使用預設的 400 毫秒；填 0 則會立即完成，沒有動畫過程。

complete 什麼時候執行？

動畫完全結束後才執行，因此常用來接續下一段流程，例如：動畫播完之後才移除元素或送出資料。

toggle 怎麼判斷該顯示還是隱藏？

它依元素當下的顯示狀態決定：目前看得見就隱藏，目前是隱藏就顯示，因此很適合做開關型的互動。

show 和 fadeIn、slideDown 差在哪？

三者都會讓元素現身，但過場不同。show() 同時改變尺寸與不透明度，fadeIn() 只改不透明度，slideDown() 則是改變高度。

延伸閱讀

滑動淡入與淡出jQuery 動態效果總覽CSS display

參考資料：jQuery API：Effects