如何使用纯JavaScript添加淡入效果

淡入效果是指选定部分的不透明度逐渐增加和减少。换句话说，淡入效果是指随着时间的推移逐渐增加和减少透明度。当这个效果应用于透明度的逐渐增加时，被称为淡入效果。这是用于在页面的选定部分上应用淡入效果的效果，以及选定的时间间隔。

我们在这些逻辑中使用了 setInterval() 方法 和 clearInterval() 方法 。

使用 setInterval() 方法： 在页面加载时，我们调用了一个名为 fadeIn() 方法 的函数。我们使用了 setInterval() 方法 ，它接受两个参数，一个是函数引用（在这种情况下是 show() 函数），另一个是定时器（以数字表示），它将在每个给定的时间间隔之后调用 show() 函数。

在 show() 函数 中，我们将属性 opacity 存储在变量名为 ‘opacity’ 的变量中，并在每次 fadeIn() 函数 被调用时递增 0.1。初始时，选定部分的不透明度被设置为0。在 script 标签内声明了 opacity 和 intervalID 两个变量。变量 opacity 处理项目的不透明度，而 intervalID 用于调用 clearInterval() 函数 。

然后，使用 window.onload = fadeIn ，自动调用 fadeIn() 函数 。当调用 fadeIn() 函数 时，会调用内置的 setInterval() 方法，它接受两个参数，一个是函数引用（在这种情况下是 show() 函数），另一个是时间间隔（在选定时间间隔之后引用函数）。在 setInterval() 中，show() 函数在每200毫秒后被调用，我们检查 body 的不透明度（通过 id 获取完整的 body），如果它小于 1，则不透明度会增加 0.1，否则调用 clearInterval() 函数 ，停止 show() 函数 的调用。

注意： 选定部分的不透明度设置为零，以理解效果。

示例： 这个示例展示了上述的方法。

<body id="body" style="opacity: 0;"> 
    <br> 
    <h1 style="color: green">GeeksforGeeks</h1> 
    <b> 
        How to create fade-in effect 
        on page load using javascript 
    </b> 
    <p> 
        This page will fade-in after loading 
    </p> 
  
    <script type="text/javascript"> 
        var opacity = 0; 
        var intervalID = 0; 
        window.onload = fadeIn; 
          
        function fadeIn() { 
            setInterval(show, 200); 
        } 
          
        function show() { 
            var body = document.getElementById("body"); 
            opacity = Number(window.getComputedStyle(body) 
                            .getPropertyValue("opacity")); 
            if (opacity < 1) { 
                opacity = opacity + 0.1; 
                body.style.opacity = opacity 
            } else { 
                clearInterval(intervalID); 
            } 
        } 
    </script> 
</body>

输出：

如何使用纯JavaScript添加淡入效果

使用clearInterval()方法： 在这种方法中，完整的逻辑是编写在一个变量中的，通过setInterval()方法来完成，这里需要在函数引用的位置写入完整的函数。这种方法相对容易理解。不透明度的默认值为1，因此我们需要将其设置为零以观察输出效果。 window.onload = fadeIn 用于自动调用fadeIn()函数。现在在fadeIn()函数中声明3个变量：

fade： 用于获取应用淡入效果的部分。
opacity： 用于处理获取部分的不透明度。
intervalID： 用于处理完整的逻辑和终止逻辑。

现在不需要写一个函数引用，而是需要写一个完整的函数，该函数将在每200毫秒之后一次又一次地被调用以增加不透明度。现在在编写的函数中，每次调用时都会将获取部分的不透明度与1进行比较。

如果发现不透明度小于1，则不透明度将增加0.1，并应用于获取部分。
如果发现不透明度为1或大于1，则调用clearInterval()函数来终止函数调用。

示例： 此示例展示了上述解释的方法。

<body id="body" style="opacity:0;"> 
    <br> 
    <h1 style="color: green">GeeksforGeeks</h1> 
    <b> 
        How to create fade-in effect 
        on page load using javascript 
    </b> 
    <p> 
        This page will fade-in after loading 
    </p> 
  
    <script type="text/javascript"> 
        window.onload = fadeIn; 
          
        function fadeIn() { 
            var fade = document.getElementById("body"); 
            var opacity = 0; 
            var intervalID = setInterval(function() { 
          
                if (opacity < 1) { 
                    opacity = opacity + 0.1 
                    fade.style.opacity = opacity; 
                } else { 
                    clearInterval(intervalID); 
                } 
            }, 200); 
        } 
    </script> 
</body>

输出： 这个输出视频是在循环中的，这就是为什么它在获取不透明度为1后不会停止。它会自动加载一遍又一遍。

如何使用纯JavaScript添加淡入效果