jQuery fadeIn() 、fadeOut()

阎星华

2023-12-01

一、jQuery fadeIn() 方法

使得一个隐藏的元素淡入视野。首先，元素占据的空间出现在页面上（这可能意味着页面上的其他元素要移走）；然后，元素逐渐地变得可见。如果元素在页面上已经可见，则这个函数没有任何效果。如果没有提供一个速度值，元素使用“常规”设置来淡入（400毫秒）。

1、语法

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

2、参数说明

speed：可选，可以取以下值："slow"、"fast" 或毫秒。

callback：可选，淡入完成后所执行的函数名称。

3、实例

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

二、jQuery fadeOut() 方法

通过使得一个可视的元素淡出视线来隐藏它。如果元素在页面上已经隐藏，这个函数没有任何效果，这和fadeIn（）函数一样。如果没有提供一个速度值，元素以400毫秒的速度淡出。

1、语法

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

2、参数说明

speed：可选，可以取以下值："slow"、"fast" 或毫秒。

callback：可选，淡出完成后所执行的函数名称。

三、jQuery fadeToggle() 方法

组合了淡入和淡出的效果。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。可以使用这个函数让一个提示框出现在页面上或从页面消失。

1、语法

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

2、参数说明

speed：可选，可以取以下值："slow"、"fast" 或毫秒。

callback：可选，fading完成后所执行的函数名称。

四、jQuery fadeTo() 方法

和其他两个效果函数略有不同。它把图像淡化到一定的透明度。例如，可以让图像淡化到半透明。和其他效果不同，必须提供一个速度值。此外，还提供0～1之间的一个值来表示元素的透明度。

语法

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

speed：必需的，规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

opacity：必需的，将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

callback：可选的，该函数完成后所执行的函数名称。