jQuery fadeTo() 方法

jQuery 中的 fadeTo() 方法用於在指定持續時間內，將所選元素的透明度逐漸更改為指定的透明度級別。

淡入淡出效果是一種視覺過渡，其中元素在指定的時間段內逐漸變得更加透明（淡出）或不太透明（淡入）。此效果是透過使用 CSS 或 JavaScript 動畫調整元素的不透明度屬性來實現的。

語法

以下是 jQuery 中 fadeTo() 方法的語法：

$(selector).fadeTo(speed,opacity,easing,callback)

引數

此方法接受以下引數：

speed: 一個字串或數字，用於確定動畫執行多長時間。可以是 'slow'、'fast' 或以毫秒為單位的數值。
opacity: 0 到 1 之間的數字，表示不透明度級別。0 表示完全透明，1 表示完全可見。
easing (可選): 指定動畫不同點處元素的速度。預設值為 "swing"。
callback (可選): 動畫完成後要呼叫的函式。

示例 1

在下面的示例中，我們透過將 <div> 元素的不透明度更改為 0 來緩慢淡出它：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div").fadeTo("slow", 0);
  });
});
</script>
</head>
<body>

<button>Click to Fade</button>
<div style="background-color: #40a944; width: 200px; height: 200px;">This is a div element</div>
</body>
</html>

當我們單擊按鈕時，它會將 <div> 元素逐漸淡出到不透明度級別 0。

示例 2

在此程式中，<div> 元素以 display: none; 開始，因此最初是隱藏的。但是，當頁面載入時，fadeTo() 方法會在 "slow" 的持續時間內將其淡入：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("div").fadeTo("slow", 1);
});
</script>
</head>
<body>
<div style="background-color: #40a944; width: 200px; height: 200px; display: none;">This is a div element</div>
</body>
</html>

當我們載入頁面或執行示例時，隱藏的 <div> 元素將淡入到不透明度級別 1。

示例 3

在下面的示例中，我們將一個可選引數 "callback" 傳遞給 fadeTo() 方法：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div").fadeTo("slow", 0, function(){
      alert("Fade out complete!");
    });
  });
});
</script>
</head>
<body>
<button>Click</button>
<div style="background-color: #40a944; width: 200px; height: 200px;">This is a div element</div>
</body>
</html>

當單擊按鈕時，<div> 元素將在 "slow" 的持續時間內逐漸淡出。淡出動畫完成後，將執行指定的回撥函式，該函式顯示一條警報訊息，提示 "淡出完成！"。

jquery_ref_effects.htm

列印頁面