jQuery 實現淡入淡出效果

知否 發表於 2021-10-21
jQuery

上一節我們學習瞭如何實現元素的顯示與隱藏,本節我們來學習如何實現元素的淡入淡出效果。

fadeIn()方法

fadeIn() 方法用於淡入已隱藏的元素。

語法如下所示:

$(selector).fadeIn(speed,callback);
  • speed:規定效果的時長,可選值有 slowfast 或毫秒。
  • callback:是 fading 完成後所執行的函式名稱。
示例:

例如當我們點選按鈕時,將紫色正方形設定為淡入效果:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $(".rect").fadeIn(2000);
    });
  });
</script>
</head>
<body>
  <div>
    <div style="margin-bottom: 20px;"><button>淡入效果</button></div>
    <div class="rect" style="width:150px;height:150px;background:plum;display: none;"></div>
  </div>
</body>
</html>

在瀏覽器中的演示效果:
jQuery 實現淡入淡出效果

我們可以通過設定 fadeIn() 方法的引數來實現不同的淡入效果,例如:

$(".rect").fadeIn("fast");

在瀏覽器中的演示效果:
jQuery 實現淡入淡出效果

fadeOut()方法

fadeOut() 方法與 fadeIn() 方法效果剛好相反,用於淡出可見元素。

語法如下所示:

$(selector).fadeOut(speed,callback);
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $(".rect").fadeOut(2000);
    });
  });
</script>
</head>
<body>
  <div>
    <div style="margin-bottom: 20px;"><button>淡出效果</button></div>
    <div class="rect" style="width:150px;height:150px;background:plum;"></div>
  </div>
</body>
</html>

在瀏覽器中的演示效果:
jQuery 實現淡入淡出效果

fadeToggle()方法

fadeToggle() 方法可以在 fadeIn()fadeOut() 方法之間進行切換。

語法如下:

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

如果元素已淡出,則 fadeToggle() 方法會向元素新增淡入效果。如果元素已經淡入,fadeToggle() 方法會向元素新增淡出效果。

示例:

實現一個淡入淡出切換效果:

$(function(){
    $("button").click(function(){
      $(".rect").fadeToggle(2000);
    });
});

在瀏覽器的演示效果:

jQuery 實現淡入淡出效果

fadeTo()方法

fadeTo() 方法允許漸變為給定的不透明度,值介於 0 與 1 之間。

語法如下:

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

其中引數 opacity 是必須引數,用於將淡入淡出效果設定為給定的不透明度,其他兩個引數為可選引數。

示例:

例如我們將這個正方形的透明度改為 0.5

$(function(){
    $("button").click(function(){
      $(".rect").fadeTo(2000, 0.5);
    });
});

在瀏覽器中的演示效果:
jQuery 實現淡入淡出效果