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

淡出效果是指选定部分透明度逐渐增加和减少的效果。换句话说，淡出效果是指根据时间逐渐增加和减少透明度。当透明度逐渐降低时，就称为淡出效果。这是用于以选定的时间间隔淡化页面上选定部分的效果。淡出和淡入效果在网页项目中非常好用，可以强调网页的样式。

fadeOut效果用于将选定元素的透明度从可见更改为隐藏。使用此方法后，淡化的元素将不占据任何空间。我们在这个逻辑中使用了setInterval方法和clearInterval方法。

在代码中使用的内置函数的语法:

JavaScript setInterval()方法: setInterval()方法在每个给定的时间间隔重复执行给定的函数。

语法:

setInterval(function_reference, time interval)

JavaScript clearInterval() 方法 : clearInterval() 函数用于清除之前由 setInterval() 函数设置的时间间隔。

语法:

clearInterval(parameterof time to stop calling a function)

方法1： 在页面加载时，我们调用一个名为fadeout()的函数，在函数中使用了setInterval()方法，该方法接受两个参数：函数引用（在此案例中隐藏）和计时器（以毫秒为单位）。

在hide函数中，我们将属性opacity赋值给名为opacity的变量，并在每次调用fadeout函数时将其减小0.1。

示例1： 这个示例描述了上面解释的方法。

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

输出：

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

解释：

在上述代码中，通过id(body)选择要应用淡出效果的部分。
window.onload=fadeout , 在页面加载时自动调用fadeout()函数。
在fadeout()函数中，还调用了名为setInterval()的函数，它在每隔200毫秒调用hide()函数，直到调用clearInterval()，当选择的部分的透明度变为零时才会调用clearInterval()。
在hide函数中，每次调用fadeout()函数时，通过简单的逻辑将透明度减少0.1。在这里， getPropertyValue(“opacity”) 被用来选择透明度属性。
这些操作将持续进行，直到透明度变为0。

方法2： 在这种方法中，将完整的逻辑写在一个变量中，使用setInterval()方法完成，这里应该写完整的函数代替函数引用。这种方法比较简单。

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

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

输出：

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

解释： 注意： 不透明度介于0-1之间，在这种情况下，初始不透明度值被设定为1。

在上述代码中，通过id选择要进行淡出效果的部分（这里是body）。
window.onload=fadeout ，用于在页面加载时自动调用fadeout()函数。
在fadeout()函数中，我们在intervalId变量中定义我们的逻辑，调用setInterval()方法，这里不是给出函数引用，而是定义整个函数。
在定义的函数中，我们每次将style.opacity与0进行比较，如果大于0，则执行一个操作来减小不透明度0.1的值，当这个值变为0时，clear函数将自动调用。
这个工作会一直持续到不透明度变为0且调用clear函数。

我们以0.1和200毫秒作为数值，任何值都是可以接受的。