javascript - JS 原生怎么写淡出效果？

问题描述

问 题

<div id="promptBox" class="box" style="display: none;">
    <div id="information"></div>
</div>

让这个promptBox实现淡出效果，用原生的JS要怎么写？查了好多资料，都不能用。

抱大腿了，大神们

解决方案

给你封装了一个方法：

            function fadeIn(el) {
                  el.style.opacity = 0;
                  el.style.display="";
                
                  var last = +new Date();
                  var tick = function() {
                    el.style.opacity = +el.style.opacity + (new Date() - last) / 1000;//1000是可改的，数字越大，显示的速度越慢
                    last = +new Date();
                
                    if (+el.style.opacity < 1) {
                      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
                    }
                  };
                  tick();
                }
                
                 var el=document.getElementById("promptBox");
                 fadeIn(el);

瞅了下，我好像写反了，变成了淡入，只要改个符号就行了（支持IE9+）：

        function fadeOut(el) {
              el.style.opacity = 1;
              el.style.display="";
            
              var last = +new Date();
              var tick = function() {
                el.style.opacity = +el.style.opacity - (new Date() - last) / 1000;
                last = +new Date();
            
                if (+el.style.opacity >0) {
                  (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
                }
              };
              tick();
            }

这篇关于javascript - JS 原生怎么写淡出效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！