jQuery:n vaikutukset - häivytys ja ilmestyminen

jQuery:n avulla voit toteuttaa elementtien häivyttämisen ja ilmestymisen.

Efectin esittely

Napsauta tätä piilottamaan/näyttämään paneeli

Aika on kultaa, joten tarjoamme sinulle nopeita ja ymmärrettäviä oppimismateriaaleja.

Tässä voit helposti ja ymmärrettävästi saada tarvitsemasi tiedon.

实例

jQuery fadeIn()
Esitellään jQuery fadeIn() -menetelmä.
jQuery fadeOut()
Esitellään jQuery fadeOut() -menetelmä.
jQuery fadeToggle()
Esitellään jQuery fadeToggle() -menetelmä.
jQuery fadeTo()
Esitellään jQuery fadeTo() -menetelmä.

jQuery Fading -menetelmät

jQuery:n avulla voit toteuttaa elementtien häivyttämisen ja ilmestymisen.

jQuery:lla on seuraavat neljä fade-menetelmää:

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

jQuery fadeIn() -menetelmä

jQuery fadeIn() -menetelmä käytetään piilotettujen elementtien häivyttämiseen.

语法：

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

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

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

Tässä esimerkissä näytetään fadeIn() -menetelmää eri parametrien kanssa:

实例

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

亲自试一试

jQuery fadeOut() -menetelmä

jQuery fadeOut() -menetelmä käytetään näkyvien elementtien häivyttämiseen.

语法：

$(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 效果参考手册。