jQuery 滑動效果：slideDown()、slideUp() 與 slideToggle()

滑動效果是透過改變指定 DOM 的 高度 來做出上、下滑動的動畫，是 jQuery 動態效果 裡最常拿來做展開式選單的一組方法。

slideDown()

指定 DOM 向下滑動。

slideDown(duration, complete);

參數

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

slideUp()

指定 DOM 向上滑動。

slideUp(duration, complete);

參數

與前述相同。

slideToggle()

指定 DOM 以切換方式上、下滑動。

slideToggle(duration, complete);

參數

與前述相同。

範例

搭配 click 事件 ，幾行就能做出一個展開式選單。

HTML

<button id="Btn">選單</button>
<ul id="Menu">
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ul>

JavaScript

$('#Btn').on('click', function () {
  $('#Menu').slideToggle(400);
});

常見問題

滑動效果實際上改的是什麼？

是元素的高度。它會把高度從 0 補間到內容高度（或反過來），因此看起來像被拉下來或捲上去。

slideToggle 適合做什麼？

最典型的就是展開式選單、常見問題的收合區塊與手風琴介面，一個方法就能同時處理展開與收合兩種狀態。

為什麼滑動時內容會被擠壓變形？

動畫過程中容器高度不斷變化，若內部元素設定了百分比高度或垂直置中，就可能跟著跳動。把內容包在一層固定排版的容器裡通常可以解決。

滑動可以改成左右方向嗎？

內建方法只處理垂直方向。要做水平的展開收合，得改用 animate() 指定寬度。

slideUp 之後元素還在嗎？

元素仍在 DOM 裡，只是被設為隱藏而不佔位置。若要真正移除，需要另外呼叫移除的方法。

延伸閱讀

顯示、隱藏與切換淡入與淡出自訂動畫jQuery Events - 滑鼠事件

參考資料：jQuery API：Effects