jQuery Fade 淡入淡出方法

通过jQuery库可使HTML元素淡入淡出，相关方法如下：

• fadeIn() 淡入（运行一下）
• fadeOut() 淡出（运行一下）
• fadeToggle() 以淡入淡出的方式切换隐藏显示状态（运行一下）
• fadeTo() 淡化到某种状态（运行一下）

---

fadeIn() 方法

通过jQuery库中的fadeIn()方法可以使隐藏状态的元素淡入显现。

fadeIn() 语法：

$(selector).fadeIn(speed, callback);

其中speed和callback都是非必选参数。speed参数指淡入显示的速度，可以取值“slow”、“fast”、具体的毫秒数。callback参数指代回调函数，即当fadeIn方法执行成功后再进行回调运行的函数。举例如下：

$("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
});

运行一下

---

fadeOut() 方法

通过jQuery库中的fadeOut()方法可以使可视元素淡出消失。

fadeOut() 语法：

$(selector).fadeOut(speed, callback);

其中speed和callback都是非必选参数。speed参数指淡出消失的速度，可以取值“slow”、“fast”、具体的毫秒数。callback参数指代回调函数，即当fadeOut方法执行成功后再进行回调运行的函数。举例如下：

$("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
});

运行一下

---

fadeToggle() 方法

通过jQuery库中的fadeToggle()方法可以使元素淡入淡出切换。

fadeToggle() 语法：

$(selector).fadeToggle(speed, callback);

其中speed和callback都是非必选参数。speed参数指淡出淡出的速度，可以取值“slow”、“fast”、具体的毫秒数。callback参数指代回调函数，即当fadeToggle方法执行成功后再进行回调运行的函数。举例如下：

$("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
});

运行一下

---

fadeTo() 方法

通过jQuery库中的fadeTo()方法可以使元素淡化到指定状态。

fadeTo() 语法：

$(selector).fadeTo(speed, opacity, callback);

其中speed和opacity都是必选参数，而callback则是非必须参数。speed参数指淡出淡出的速度，可以取值“slow”、“fast”、具体的毫秒数；opacity参数是目标透明度，取值0到1之间的任何实数，即淡化到目标透明度结束；callback参数指代回调函数，即当fadeTo方法执行成功后再进行回调运行的函数。举例如下：

$("button").click(function(){
    $("#div1").fadeTo("slow", 0.15);
    $("#div2").fadeTo("slow", 0.4);
    $("#div3").fadeTo("slow", 0.7);
});

运行一下