相关知识
| jquery方法 | 参数 | 举例 | 补充 |
|---|---|---|---|
| fadeIn淡入 | speed—显示速度（fast,slow,normal,毫秒数） easing—在动画的不同点上元素的速度 swing(默认)：开头结尾慢，中间快 linear匀速 fn—回调函数 | $('#img').fadeIn('fast', function(){console.log("fadeIn");}) | |
| fadeOut淡出 | 同fadeIn | ||
| fadeToggle淡入/淡出切换 | 同fadeIn | 若元素已隐藏，单击时淡入；若元素已显示，单击时淡出（可以简单理解为fadeIn和fadeOut参数相同时的结合） | |
| fadeTo | 同fadeIn, opacity—透明度（0完全透明~1完全不透明） | $('#img').fadeTo('slow',0.3); | opacity参数为0时，元素仍占据空间 |
效果
（只针对前三张图片进行，每张图片的变化速度不同，第四张图片作为空间参考）
- 隐藏（fadeIn）：第二张图片先淡出，再第一张，再第三张
- 显示(fadeOut)：按第一二三的顺序依次淡入，前一张显示完毕才开始后一张的淡入过程
- 显示/隐藏(fadeToggle)：若图片已被隐藏，则按顺序依次淡入，否则按顺序依次淡出
- 变透明(fadeTo)：三张图片同时变透明，透明度不相同，透明度为0的第二张图片仍然占据空间
- 恢复不透明(fadeTo)：三张图片恢复至完全不透明
补充说明
原本设置了一个按钮绑定toggle函数，单击按钮则元素的透明度变淡，再次单击则恢复不透明。但jquery1.7后.toggle方法不再是“两个函数轮流进行”，而是被绑定元素（即按钮）的 display 显示/隐藏 相互切换，而toggle中的function函数会被立即执行。故将该按钮拆分成两个，一个控制透明度变淡，一个控制恢复不透明。
引入jquery.easing后，easing参数可选32种。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fade淡入淡出</title>
<script type="text/javascript" src="../js/jquery-3.7.1.js"></script>
<style type="text/css">
img{
width: 100px;
height: 130px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="button-box">
<input type="button" value="显示(fadeIn)" id="fadeInBtn">
<input type="button" value="隐藏(fadeOut)" id="fadeOutBtn">
<input type="button" value="显示/隐藏(fadeToggle)" id="fadeToggleBtn">
<input type="button" value="变透明(fadeTo)" id="fadeToBtn">
<input type="button" value="不透明(fadeTo)" id="fadeToBtn2">
</div>
<img src="../images/jquery-fade/1.jpg" id="Img1" alt="">
<img src="../images/jquery-fade/2.jpg" id="Img2" alt="">
<img src="../images/jquery-fade/3.jpg" id="Img3" alt="">
<img src="../images/jquery-fade/4.jpg" id="Img4" alt="">
<script type="text/javascript">
// 依次淡入
$("#fadeInBtn").click(function(){
$("#Img1").fadeIn("fast",function(){
$("#Img2").fadeIn("slow",function(){
$("#Img3").fadeIn(1000)
})
})
});
// 同时淡出
$("#fadeOutBtn").click(function(){
$("#Img1").fadeOut("slow");
$("#Img2").fadeOut("fast");
$("#Img3").fadeOut(1000);
})
// 依次淡入淡出
$("#fadeToggleBtn").click(function(){
$("#Img1").fadeToggle("fast",function(){
$("#Img2").fadeToggle("slow",function(){
$("#Img3").fadeToggle(1000);
})
})
})
// 元素变透明（全透明仍占据空间）
$("#fadeToBtn").click(function(){
$("#Img1").fadeTo("fast",0.15);
$("#Img2").fadeTo("slow",0);
$("#Img3").fadeTo(1000,0.3);
});
// 元素恢复不透明
$("#fadeToBtn2").click(function(){
$("#Img1").fadeTo("fast",1);
$("#Img2").fadeTo("slow",1);
$("#Img3").fadeTo(1000,1);
});
</script>
</body>
</html>
