本文目录：
- fadeIn()；
- fadeOut()；
- fadeToggle()；
- fadeTo()。
fadeIn(speed, callback)
给所选元素添加淡入效果。
| 参数 | 类型 | 描述 |
|---|---|---|
| speed | String/Number | 可选。动画时长，预设值为 "slow"（600）、"normal"（默认值，400）、"fast"（200），也可自定义动画时长，单位为毫秒（如：1000）。 |
| callback | Function() | 可选。动作完成后执行的函数。 |
fadeOut(speed, callback)
给所选元素添加淡出效果。
| 参数 | 类型 | 描述 |
|---|---|---|
| speed | String/Number | 可选。动画时长，预设值为 "slow"（600）、"normal"（默认值，400）、"fast"（200），也可自定义动画时长，单位为毫秒（如：1000）。 |
| callback | Function() | 可选。动作完成后执行的函数。 |
fadeToggle(speed, easing, callback)
fadeToggle() 方法是 fadeIn() 方法和 fadeOut() 方法的结合，既能给元素添加淡入效果，又能给元素添加淡出效果。
| 参数 | 类型 | 描述 |
|---|---|---|
| speed | String/Number | 可选。动画时长，预设值为 "slow"（600）、"normal"（默认值，400）、"fast"（200），也可自定义动画时长，单位为毫秒（如：1000）。 |
| easing | String | 可选。过渡动画的类型，预设值为 "linear"、"swing"（默认值）。 |
| callback | Function() | 可选。动作完成后执行的函数。 |
fadeTo(speed, opacity, easing, callback)
fadeTo() 方法允许所选元素淡入/淡出至给定的不透明度（值介于 0 与 1 之间）。
| 参数 | 类型 | 描述 |
|---|---|---|
| speed | String/Number | 可选。动画时长，预设值为 "slow"（600）、"normal"（默认值，400）、"fast"（200），也可自定义动画时长，单位为毫秒（如：1000）。 |
| opacity | Number | 必选。不透明度，取值范围：0 至 1。 |
| easing | String | 可选。过渡动画的类型，预设值为 "linear"、"swing"（默认值）。 |
| callback | Function() | 可选。动作完成后执行的函数。 |
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>效果_淡入淡出</title>
<script src="js/jquery-1.8.3.js"></script>
<style>
#div1 {
width: 100px;
height: 100px;
background-color: orangered;
}
</style>
</head>
<body>
<div id="div1"></div>
<button id="btn1">淡入</button>
<button id="btn2">淡出</button>
<button id="btn3">淡入/淡出</button>
<button id="btn4">淡入/淡出至给定透明度</button>
<script>
$(function () {
// 淡入
$("#btn1").click(function () {
$("#div1").fadeIn("slow");
});
// 淡出
$("#btn2").click(function () {
$("#div1").fadeOut("fast");
});
// 淡入/淡出
$("#btn3").click(function () {
$("#div1").fadeToggle(1000);
});
// 淡入/淡出至给定的透明度
$("#btn4").click(function () {
$("#div1").fadeTo(1000, 0.5);
});
});
</script>
</body>
</html>
效果演示：
淡入淡出.gif
网友评论