jQuery 提供了几种方法来执行淡入和淡出效果，以下是 fadeIn(), fadeOut(), fadeToggle(), 和 fadeTo() 方法的详细介绍和示例。
1. fadeIn()
fadeIn() 方法用于逐渐显示一个元素。
语法：
$(selector).fadeIn([duration], [easing], [complete]);
- duration: 可选，动画持续时间（例如："slow", "fast" 或毫秒数）。
- easing: 可选，动画的效果（例如："swing", "linear"）。
- complete: 可选，动画完成后执行的回调函数。
示例：
HTML:
<button id="btnFadeIn">Fade In</button>
<div id="myDiv" style="display:none; height:100px; background:red;">
Hello World
</div>
JavaScript:
$(document).ready(function(){
$("#btnFadeIn").click(function(){
$("#myDiv").fadeIn("slow");
});
});
2. fadeOut()
fadeOut() 方法用于逐渐隐藏一个元素。
语法：
$(selector).fadeOut([duration], [easing], [complete]);
- duration: 可选，动画持续时间。
- easing: 可选，动画的效果。
- complete: 可选，动画完成后执行的回调函数。
示例：
HTML:
<button id="btnFadeOut">Fade Out</button>
<div id="myDiv" style="height:100px; background:red;">
Hello World
</div>
JavaScript:
$(document).ready(function(){
$("#btnFadeOut").click(function(){
$("#myDiv").fadeOut("slow");
});
});
3. fadeToggle()
fadeToggle() 方法用于切换元素的淡入淡出状态。如果元素是隐藏的，它将淡入；如果元素是显示的，它将淡出。
语法：
$(selector).fadeToggle([duration], [easing], [complete]);
- duration: 可选，动画持续时间。
- easing: 可选，动画的效果。
- complete: 可选，动画完成后执行的回调函数。
示例：
HTML:
<button id="btnFadeToggle">Fade Toggle</button>
<div id="myDiv" style="height:100px; background:red;">
Hello World
</div>
JavaScript:
$(document).ready(function(){
$("#btnFadeToggle").click(function(){
$("#myDiv").fadeToggle("slow");
});
});
4. fadeTo()
fadeTo() 方法用于将元素的透明度在一定时间内渐变到指定的值。
语法：
$(selector).fadeTo([duration], opacity, [easing], [complete]);
- duration: 必需，动画持续时间。
- opacity: 必需，目标透明度（0 到 1 之间的值）。
- easing: 可选，动画的效果。
- complete: 可选，动画完成后执行的回调函数。
示例：
HTML:
<button id="btnFadeTo">Fade To 0.5</button>
<div id="myDiv" style="height:100px; background:red;">
Hello World
</div>
JavaScript:
$(document).ready(function(){
$("#btnFadeTo").click(function(){
$("#myDiv").fadeTo("slow", 0.5);
});
});
完整项目实例
以下是一个完整的 HTML 页面示例，包含了上述所有方法的使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Fade Effects</title>
<style>
#myDiv {
width: 200px;
height: 100px;
background-color: red;
margin-bottom: 20px;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="btnFadeIn">Fade In</button>
<button id="btnFadeOut">Fade Out</button>
<button id="btnFadeToggle">Fade Toggle</button>
<button id="btnFadeTo">Fade To 0.5</button>
<div id="myDiv"></div>
<script>
$(document).ready(function(){
$("#btnFadeIn").click(function(){
$("#myDiv").fadeIn("slow");
});
$("#btnFadeOut").click(function(){
$("#myDiv").fadeOut("slow");
});
$("#btnFadeToggle").click(function(){
$("#myDiv").fadeToggle("slow");
});
$("#btnFadeTo").click(function(){
$("#myDiv").fadeTo("slow", 0.5);
});
});
</script>
</body>
</html>
