jQuery淡入/淡出HTML元素

jQuery提供了4个方法进行HTML元素的渐变效果动画。

这四个方法的原型如下:

$(selector).fadeIn([duration] [,callback]);
$(selector).fadeOut([duration] [,callback]);
$(selector).fadeToggle([duration] [,callback]);
$(selector).fadeTo([duration], opacity [,callback]);

fadeIn()方法用于淡入已隐藏的HTML元素。

fadeOut()方法用于淡出正在显示的HTML元素。

fadeToggle()方法用于在淡出和淡出之间切换。

fadeTo()方法用于把HTML元素的opacity切换到指定值。

duration参数规定隐藏/显示的时间,此时有动画过程。其值可以是slowfast或具体的毫秒。

opacity取值在0-1之间。

示例:

$("p").fadeIn();
$("p").fadeIn(1000);
$("p").fadeIn(1000, function() {
    //TODO
});

$("p").fadeOut();
$("p").fadeOut('slow');
$("p").fadeOut(1000, function() {
    //TODO
});

$("p").fadeToggle();
$("p").fadeToggle('fast');
$("p").fadeToggle(1000, function() {
    //TODO
});

$("p").fadeTo(1);
$("p").fadeTo('fast', 1);
$("p").fadeTo(1000, 1, function() {
    //TODO
});