## 1.淡入特效的函数fadeIn()
```
// 1.淡入/渐显
$("#fadeIn").click(function(event) {
$("#group1 img:first").fadeIn("slow")
$("#group1 img:eq(1)").fadeIn("fast")
$("#group1 img:last").fadeIn(5000,function(){
alert("图片淡入显示成功~~");
});
});
```
## 2.淡入特效的函数fadeOut()
```
// 2.淡出/渐隐
$("#fadeOut").click(function(event) {
$("#group2 img:first").fadeOut("slow")
$("#group2 img:eq(1)").fadeOut("fast")
$("#group2 img:last").fadeOut(5000,function(){
alert("图片已全部淡出完成~~");
});
});
```
## 3.淡入/淡出自动切换
```
// 3.淡入/淡出自动切换
$("#fadeToggle").click(function(event) {
$("#group3 img:first").fadeToggle("slow")
$("#group3 img:eq(1)").fadeToggle("fast")
$("#group3 img:last").fadeToggle(5000,function(){
alert("图片淡入/淡出切换成功~~");
});
});
```
## 4.设置褪色级别(0~1)
```
// 4.设置褪色级别(0~1)
$("#fadeTo").click(function(event) {
$("#group4 img:first").fadeTo("slow",0.6)
$("#group4 img:eq(1)").fadeTo("fast",0.4)
$("#group4 img:last").fadeTo(5000,0.2,function(){
alert("图片褪色功能完成~~");
});
});
```
案例：
~~~
#group1 img{display:none;}
$(document).ready(function() {
// 1.淡入/渐显
$("#fadeIn").click(function(event) {
$("#group1 img:first").fadeIn("slow")
$("#group1 img:eq(1)").fadeIn("fast")
$("#group1 img:last").fadeIn(5000,function(){
alert("图片淡入显示成功~~");
});
});
// 2.淡出/渐隐
$("#fadeOut").click(function(event) {
$("#group2 img:first").fadeOut("slow")
$("#group2 img:eq(1)").fadeOut("fast")
$("#group2 img:last").fadeOut(5000,function(){
alert("图片已全部淡出完成~~");
});
});
// 3.淡入/淡出自动切换
$("#fadeToggle").click(function(event) {
$("#group3 img:first").fadeToggle("slow")
$("#group3 img:eq(1)").fadeToggle("fast")
$("#group3 img:last").fadeToggle(5000,function(){
alert("图片淡入/淡出切换成功~~");
});
});
// 4.设置褪色级别(0~1)
$("#fadeTo").click(function(event) {
$("#group4 img:first").fadeTo("slow",0.6)
$("#group4 img:eq(1)").fadeTo("fast",0.4)
$("#group4 img:last").fadeTo(5000,0.2,function(){
alert("图片褪色功能完成~~");
});
});
});
6-2淡入与淡出
1.淡入/渐显
2.淡出/渐隐
3.淡入/淡出自动切换
4.设置褪色级别(0~1)
~~~