jQuery淡出效果() 方法

淡出效果是一種視覺過渡，其中元素逐漸從可見變為隱藏或透明。它會在指定時間內平滑地降低元素的不透明度，從而建立一個平滑的過渡效果。

jQuery 中的fadeOut()方法用於逐漸降低所選元素的不透明度，簡單地透過淡出將其隱藏。它提供了一個平滑的視覺過渡效果，使元素逐漸消失。

此方法也可以與"fadeIn()"方法一起使用。

語法

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

$(selector).fadeOut(speed,easing,callback)

引數

此方法接受以下可選引數：

speed（可選）：以毫秒為單位指定淡出動畫的持續時間（預設為 400）。
easing（可選）：指定用於動畫的緩動函式（預設為 'swing'）。
callback（可選）：淡出動畫完成後要執行的回撥函式。

示例 1

在下面的示例中，我們使用 fadeOut() 方法淡出一個 id 為 "content" 的單個<div>元素：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("#fadeBtn").click(function(){
    $("#content").fadeOut();
  });
});
</script>
</head>
<body>

<div id="content" style="background-color: lightblue; padding: 20px;">
  <h2>This content will fade out.</h2>
</div>
<button id="fadeBtn">Click me!</button>
</body>
</html>

如果我們點選按鈕，<div>元素將淡出。

示例 2

在這個例子中，我們淡出多個具有類 "fade" 的 <div> 元素：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("#fadeBtn").click(function(){
    $(".fade").fadeOut();
  });
});
</script>
</head>
<body>

<div class="fade" style="background-color: lightblue; padding: 20px;">
  <h2>Element 1</h2>
</div>
<div class="fade" style="background-color: lightcoral; padding: 20px;">
  <h2>Element 2</h2>
</div>
<button id="fadeBtn">Fade Out Elements</button>
</body>
</html>

點選按鈕後，所有三個 <div> 元素都將淡出。

示例 3

在這個例子中，淡出動畫持續時間設定為 2000 毫秒（2 秒），方法是將持續時間引數傳遞給 fadeOut() 方法：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("#fadeBtn").click(function(){
    $("#content").fadeOut(2000); // Duration set to 2000 milliseconds (2 seconds)
  });
});
</script>
</head>
<body>

<div id="content" style="background-color: lightblue; padding: 20px;">
  <h2>This is a content to fade out.</h2>
</div>
<button id="fadeBtn">Click me!</button>
</body>
</html>

點選按鈕後，<div> 元素將在 2 秒內淡出。

jquery_ref_effects.htm

列印頁面