jQuery 淡入與淡出：fadeIn()、fadeOut()、fadeTo()

以指定 DOM 的 不透明度 進行淡入、淡出效果。相較於 滑動 ，不透明度的變化不會牽動版面配置，因此通常播起來更順。

fadeIn()

指定 DOM 由隱藏的狀態淡入畫面中。

fadeIn(duration, complete);

參數

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

fadeOut()

指定 DOM 由顯示的狀態淡出畫面。淡到完全透明之後，元素會被設為隱藏，不再佔用版面位置。

fadeOut(duration, complete);

參數

與前述相同。

fadeToggle()

指定 DOM 進行淡入、淡出的切換。

fadeToggle(duration, complete);

參數

與前述相同。

範例

HTML

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

JavaScript

$('#Btn').on('click', function () {
  $('#Dom').fadeToggle('slow');
});

fadeTo()

指定 DOM 進行不透明度的設定。與 fadeOut() 最大的差別是：元素 仍然佔著版面位置 ，只是變得半透明。

fadeTo(duration, opacity, complete);

參數

duration 與 opacity 兩個都是必填，順序也不能顛倒。

功能	說明	型別	範例	備註
duration	效果的速度	String、Number	'slow'、'fast'、400	必填
opacity	不透明度	Number	.5、.7	必填
complete	結束後的執行事項	Function	function() {}

範例

HTML

<div id="Dom">DOM</div>

JavaScript

$('#Dom').fadeTo(400, 0.5);

常見問題

淡入淡出改的是哪個 CSS 屬性？

是不透明度 opacity。fadeIn() 與 fadeOut() 會把不透明度補間到 1 或 0，而 fadeOut() 在結束時還會順便把元素設為隱藏。

fadeTo 和 fadeOut 差在哪？

fadeTo() 只把不透明度調到你指定的值，元素仍然佔著版面位置；fadeOut() 則是淡到完全透明之後把元素隱藏起來，不再佔位置，行為等同 hide() 。

fadeTo 的 duration 可以省略嗎？

不行。fadeTo() 的速度與不透明度兩個參數都是必填，順序也不能顛倒。

opacity 要填多少？

填 0 到 1 之間的數字，0 是完全透明、1 是完全不透明，例如：0.5 代表半透明。

為什麼淡入淡出通常比滑動順？

因為不透明度的變化不會影響版面配置，瀏覽器不必重新計算排版；滑動 改變的是高度，每一幀都會牽動周圍元素的位置。

延伸閱讀

顯示、隱藏與切換滑動自訂動畫jQuery 動態效果總覽

參考資料：jQuery API：Effects