jQuery 實現淡入淡出效果

知否發表於2021-10-21
jQuery

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

fadeIn()方法

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

語法如下所示：

$(selector).fadeIn(speed,callback);
  • speed：規定效果的時長，可選值有 slow、fast 或毫秒。
  • 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>

在瀏覽器中的演示效果：

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

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

在瀏覽器中的演示效果：

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>

在瀏覽器中的演示效果：

fadeToggle()方法

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

語法如下：

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

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

示例：

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

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

在瀏覽器的演示效果：

fadeTo()方法

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

語法如下：

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

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

示例：

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

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

在瀏覽器中的演示效果：

相關文章