如何使用純JavaScript新增淡出效果？

我們可以透過操作元素的style屬性來使用純JavaScript新增淡出效果。我們可以首先將元素的不透明度設定為1，然後使用setInterval或setTimeout函式隨著時間的推移逐漸降低它。最後，一旦不透明度達到0，我們可以從DOM中移除該元素。

淡出效果

淡出效果是一種視覺過渡，其中元素在一段時間內逐漸變得不那麼可見。這種效果通常用於網頁設計和動畫中，以在頁面上的元素之間建立平滑的過渡，或將元素從檢視中隱藏。

因此，讓我們討論一下我們今天將要使用的方法。

方法

  • 建立一個用於淡出效果的函式。在函式內部，建立一個變數來儲存要應用效果的元素：

function fadeOut(element) {
  var el = document.getElementById(element);
}

  • 向淡出函式新增一個setInterval函式。這將允許效果持續執行，直到元素不再可見。

function fadeOut(element) {
   var el = document.getElementById(element);
   setInterval(function() {
      // code for the fade-out effect
   }, 50);
}

  • 在setInterval函式內部，建立一個變數來儲存元素的當前不透明度。然後，使用if語句檢查不透明度是否大於0。如果是，則將不透明度遞減0.1，並將新值應用於元素的style.opacity屬性：

function fadeOut(element) {
   var el = document.getElementById(element);
   setInterval(function() {
      var opacity = el.style.opacity;
      if (opacity > 0) {
         opacity -= 0.1;
         el.style.opacity = opacity;
      }
   }, 50);
}

  • 最後，呼叫fadeOut函式並傳入要應用效果的元素的ID：

fadeOut("myElement");

注意：這是一個使用純JavaScript建立淡出效果的基本示例。您可以調整不透明度、遞減值、間隔時間並新增其他邏輯以使效果更動態。

示例

因此，讓我們現在看看完整的可執行程式碼以及它的工作原理。

<!DOCTYPE html>
<html>
<head>
   <title>Fade Out</title>
</head>
   <body>
      <div style="color:black;" class="fade-out-element">
         This is the element that will fade out
      </div>
      <script>
         var element = document.querySelector('.fade-out-element'); 
         function fadeOut(el) {
            var opacity = 1; // Initial opacity
            var interval = setInterval(function() {
               if (opacity > 0) {
                  opacity -= 0.1;
                  el.style.opacity = opacity;
               } else {
                  clearInterval(interval); // Stop the interval when opacity reaches 0
                  el.style.display = 'none'; // Hide the element
               }
            }, 50);
         }
         fadeOut(element);
      </script>
   </body>
</html>

更新於：2023年2月6日

9K+ 次瀏覽

啟動你的職業生涯

透過完成課程獲得認證

開始學習
廣告