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);
});

親自試一試

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 效果參考手冊。