## 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淡入与淡出

~~~