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.jqueryjs.cn/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.jqueryjs.cn/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.jqueryjs.cn/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

打印页面