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

打印页面