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

淡入效果是指所选部分透明度逐渐增加和减少的过程。换句话说，淡入效果指的是根据时间逐渐增加和减少透明度。当将此效果应用于透明度逐渐增加的过程时，称为淡入效果。这是在页面的选定部分中使用的效果，指定的时间间隔内应用淡入效果。

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

使用setInterval()方法： 在页面加载时，我们调用了一个名为 fadeIn()方法 的函数。我们使用了 setInterval()方法 ，它接受两个参数，一个是函数引用（在本例中是show()），另一个是计时器（数值），它会在每个给定的时间间隔后调用 show()函数 。

在 show()函数 中，我们将opacity属性存储在变量名“opacity”中，并在每次调用 fadeIn()方法 时将其增加0.1。首先，将所选部分的透明度设为0。在脚本标签中声明了变量opacity和 intervalID 。变量opacity处理项目的透明度，而 intervalID 用于调用 clearInterval()函数 。

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

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

示例： 本示例演示了上述方法。

<body id="body" style="opacity: 0;">
    <br>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>
        如何使用javascript在页面加载时创建淡入效果
    </b>
    <p>
    页面上将在加载后淡入
    </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，则调用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添加淡入效果