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>
