day20-21使用opacity制作渐变_opacity字渐变隐藏显-CSDN博客

本文链接：https://blog.csdn.net/RealRecall/article/details/110324032

对于淡入有两种方法：
一、利用法

<html>
  <body>
    <div
      id="fade-obj"
      style="width: 300px; height: 300px; background: #000"
    ></div>
    <button id="fade-btn">淡出</button>
    <script>
      let div = document.querySelector("div");
      div.style.opacity = 0;
      function danchu() {
        if (div.style.opacity >= 0) {
          div.style.opacity -= -0.001;//这行代码很关键，作用是让opacity的值增大。
          setTimeout("danchu()",1);
        }
      }
      danchu();
    </script>
  </body>
</html>

这种方法利用了JS中的类型自动转换：当字符串与数字相减时，结果等于数字（如果字符串与数字相加，结果等于字符串，虽然opacity可以接收字符串和数字，但这样不能计算出想要的结果，于是为了达到想要的效果，可以使用方法二，转化一下类型就好啦！）

"5" + 2     // 返回 52        因为 2 被转换为 "2"
"5" - 2     // 返回 3         因为 "5" 被转换为 5

二、转换法

        if (div.style.opacity >= 0) {
          div.style.opacity = Number(div.style.opacity) + 0.001;
          setTimeout("danchu()",1);
        }

我觉得用方法二比较好，这样写很清楚。方法一比较抖机灵。

淡出同理啦！