jQuery 效果 - 淡入淡出

通过 jQuery，您可以实现元素的淡入淡出效果。

效果演示

点击这里，隐藏/显示面板

一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。

在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。

实例

jQuery fadeIn()
演示 jQuery fadeIn() 方法。
jQuery fadeOut()
演示 jQuery fadeOut() 方法。
jQuery fadeToggle()
演示 jQuery fadeToggle() 方法。
jQuery fadeTo()
演示 jQuery fadeTo() 方法。

jQuery Fading 方法

通过 jQuery，您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法：

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

jQuery fadeIn() 方法

jQuery fadeIn() 用于淡入已隐藏的元素。

语法：

$(selector.fadeIn(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast"或毫秒。

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

下面的例子演示了带有不同参数的 fadeIn() 方法：

实例

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

亲自试一试

jQuery fadeOut() 方法

jQuery fadeOut() 方法用于淡出可见元素。

语法：

$(selector.fadeOut(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast"或毫秒。

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

下面的例子演示了带有不同参数的fadeOut()方法：

实例

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

亲自试一试

jQueryfadeToggle()方法

jQueryfadeToggle()方法可以在fadeIn()与fadeOut()方法之间进行切换。

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

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

语法：

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

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast"或毫秒。

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

下面的例子演示了带有不同参数的fadeToggle()方法：

实例

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

亲自试一试

jQueryfadeTo()方法

jQueryfadeTo()方法允许渐变为给定的不透明度（值介于0与1之间）。

语法：

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

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

fadeTo()方法中必需的opacity参数将淡入淡出效果设置为给定的不透明度（值介于0与1之间）。

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

下面的例子演示了带有不同参数的fadeTo()方法：

实例

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

亲自试一试

jQuery效果参考手册

如需全面查阅jQuery效果，请访问我们的 jQuery效果参考手册。