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

渐变效果被描述为所选部分的不透明度逐渐增加和减少。换句话说，淡化效果被称为不透明度随时间的增加和减少。当应用此效果并逐渐降低不透明度时，它被称为淡出效果。这是用于以选定的时间间隔淡出页面上选定部分的效果。淡出淡入效果非常适合在 Web 项目中使用，因为它强调了网页的样式。

fadeOut 效果用于将选定元素的不透明度级别从可见更改为隐藏。通过使用这种方法，褪色的元素不会占用任何空间。我们在这个逻辑中使用了 setInterval 方法和 clearInterval 方法。

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

• setInterval()：它有两个参数：

  setInterval(function_reference, time interval)

• clearInterval()：它采用单个参数：

  clearInterval(parameterof time to stop calling a function)

方法 1：在页面加载时，我们调用了一个名为 fadeout() 的函数，其中我们使用了 setInterval() 方法，该方法有两个参数：一个是函数引用（在本例中为隐藏），另一个是计时器（以数字为单位） ）。
在 hide函数中，我们在名为 opacity 的变量中获取属性 opacity 并在每次调用淡出函数时将其减少 0.1。

示例 1：

    How to create fade-out effect 
            on page load using 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); 
            }
        } 
     
      
      
      

  

  

  
     
        GeeksForGeeks 
     
  
     
        How to create fade-out effect 
        on page load using javascript 
    
  
  
     
        This page will fade-out 
        after loading 
     

    

输出：

解释：

注意：不透明度介于 0-1 之间，在这种情况下，初始不透明度值取 1。

• 在上面的代码中，要完成淡出效果的部分由id(body in this case)选择。
• window.onload=fadeout ，用于在页面继续加载时自动调用淡出（）函数。
• 在fadeout（）函数中，还调用了名称setInterval（）的另一个函数，该函数在200毫秒的每个间隔上调用hide（）函数，直到调用clearInterval（），当所选部分的不透明度变为零时，将调用clearinterval（） .
• 在 hide 函数中，编写了简单的逻辑，用于每次在所选部分上调用 fadeout()函数时将不透明度降低 0.1。在此， getPropertyValue(“opacity”)用于选择属性不透明度。
• 这些工作一直持续到不透明度变为 0。

方法2：在这种方法中，完整的逻辑写在一个变量中，这是在 setInterval() 方法的帮助下完成的，这里用完整的函数来代替函数引用。这种方法比较容易。

示例 2：

    How to create fade-out effect 
            on page load using 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);
}
       
       
      
    


   
     
        GeeksForGeeks 
     
  
     
        How to create fade-out effect 
        on page load using javascript 
    
  
  
     
        This page will fade-out after loading 
     

输出：

解释：

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

• 在上面的代码中，要完成淡出效果的部分由id(body in this case).
• window.onload=fadeout ，用于在页面继续加载时自动调用淡出（）函数。
• 在fadeout()函数中，我们在调用setInterval() 方法的intervalId 变量中定义我们的逻辑，这里没有给出函数引用，而是定义了整个函数。
• 在定义函数中，每次比较 style.opacity 与 0，如果大于 0，则执行操作将 opacity 减少 0.1 个值，当该值变为 0 时，将自动调用 clear函数.
• 这个工作一直持续到不透明度变为 0 并调用 clear函数。

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