返回宝典

jQuery Fade

上一节 下一节
点击这里淡出/淡入下方面板
反清复明

jQuery Fade 淡入淡出方法

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


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);
});

运行一下


jQuery Fade

上一节 下一节