jQuery Effect - In- en Uitverlichten

Met jQuery kunt u het effect van in- en uitschakelen van elementen realiseren.

Effect Demonstratie

Klik hier om het paneel te verbergen/toon

Een inch tijd is een inch goud, dus bieden we u snelle en begrijpelijke leerinhoud aan.

Hier kunt u op een begrijpelijke en handige manier de kennis verkrijgen die u nodig heeft.

实例

jQuery fadeIn()
Demonstreer de jQuery fadeIn() methode.
jQuery fadeOut()
Demonstreer de jQuery fadeOut() methode.
jQuery fadeToggle()
Demonstreer de jQuery fadeToggle() methode.
jQuery fadeTo()
Demonstreer de jQuery fadeTo() methode.

jQuery Fading Methode

Met jQuery kunt u het effect van in- en uitschakelen van elementen realiseren.

jQuery beschikt over de volgende vier fade-methoden:

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

De jQuery fadeIn() methode

De jQuery fadeIn() methode wordt gebruikt om verborgen elementen te verlichten.

语法：

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

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

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

Hieronder wordt een voorbeeld gegeven van de fadeIn() methode met verschillende parameters:

实例

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

亲自试一试

De jQuery fadeOut() methode

De jQuery fadeOut() methode wordt gebruikt om zichtbare elementen te vervagen.

语法：

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

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

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

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

实例

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

亲自试一试

jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 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);
);

亲自试一试

jQuery fadeTo() 方法

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 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 效果参考手册。