jQuery 提供了多种方便的淡入淡出（Fade In/Out）动画方法，用于控制元素的透明度，实现平滑的显示和隐藏效果。
主要淡入淡出方法
fadeIn([duration], [easing], [callback])
作用：将匹配元素的不透明度从 0（完全透明/隐藏）逐渐增加到 1（完全不透明/显示），实现淡入效果。
参数：
duration (可选)：动画持续时间。可以是字符串 "slow" (600ms), "fast" (200ms)，或以毫秒为单位的数字 (如 400)。
easing (可选)：指定切换效果的函数。默认是 "swing"（慢-快-慢），也可用 "linear"（匀速）。
callback (可选)：动画完成时执行的函数。
fadeOut([duration], [easing], [callback])
作用：将匹配元素的不透明度从 1（完全不透明/显示）逐渐减少到 0（完全透明/隐藏），实现淡出效果。
参数：同 fadeIn。
fadeToggle([duration], [easing], [callback])
作用：在 fadeIn() 和 fadeOut() 之间切换。如果元素当前是隐藏的，则执行 fadeIn；如果当前是显示的，则执行 fadeOut。
参数：同 fadeIn。
fadeTo(duration, opacity, [easing], [callback])
作用：将匹配元素的不透明度动画到指定的值（opacity）。opacity 是一个 0.0 到 1.0 之间的数字。
参数：
duration (必需)：动画持续时间。
opacity (必需)：目标不透明度值。
easing (可选)：切换效果函数。
callback (可选)：动画完成时执行的函数。
淡入淡出代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 淡入淡出示例</title>
<!-- 引入 jQuery 库 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
.box {
width: 200px;
height: 100px;
margin: 10px;
padding: 10px;
background-color: #3498db;
color: white;
border: 1px solid #2980b9;
text-align: center;
line-height: 100px;
font-weight: bold;
display: none; /* 初始隐藏，用于 fadeIn 演示 */
}
button {
margin: 5px;
padding: 10px 15px;
font-size: 14px;
cursor: pointer;
}
.btn-group {
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>jQuery 淡入淡出动画演示</h1>
<div class="btn-group">
<h3>1. fadeIn() 和 fadeOut()</h3>
<button id="btnFadeIn">淡入显示</button>
<button id="btnFadeOut">淡出隐藏</button>
</div>
<div class="btn-group">
<h3>2. fadeToggle()</h3>
<button id="btnToggle">切换显示/隐藏</button>
</div>
<div class="btn-group">
<h3>3. fadeTo()</h3>
<button id="btnToHalf">淡到半透明 (0.5)</button>
<button id="btnToFull">淡到完全不透明 (1.0)</button>
<button id="btnToHidden">淡到完全透明 (0.0)</button>
</div>
<!-- 用于演示的元素 -->
<div id="demoBox" class="box">这是一个演示盒子</div>
<script>
$(document).ready(function() {
// 1. fadeIn 和 fadeOut
$('#btnFadeIn').click(function() {
// 使用默认速度（400ms）淡入
$('#demoBox').fadeIn();
// 或者指定速度：$('#demoBox').fadeIn(800);
// 或者使用慢速：$('#demoBox').fadeIn('slow');
});
$('#btnFadeOut').click(function() {
// 使用慢速淡出，并在完成后执行回调函数
$('#demoBox').fadeOut('slow', function() {
// 动画完成后执行
console.log('淡出动画已完成！');
// 可以在这里添加其他操作
});
});
// 2. fadeToggle
$('#btnToggle').click(function() {
// 切换显示状态，使用快速动画
$('#demoBox').fadeToggle('fast');
});
// 3. fadeTo
$('#btnToHalf').click(function() {
// 淡到半透明，持续 600ms
$('#demoBox').fadeTo(600, 0.5);
});
$('#btnToFull').click(function() {
// 淡到完全不透明，使用线性动画
$('#demoBox').fadeTo('slow', 1.0, 'linear');
});
$('#btnToHidden').click(function() {
// 淡到完全透明（隐藏），持续 1000ms
$('#demoBox').fadeTo(1000, 0.0, function() {
console.log('已完全透明');
});
});
// 额外提示：可以链式调用，例如淡出后立即淡入
// $('#demoBox').fadeOut(500).fadeIn(500);
});
</script>
</body>
</html>
