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

Question

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

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

抱大腿了，大神们

Answer 1

给你封装了一个方法：

            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();
            }

Answer 2

我写的，是用css3,不过最后采用了楼上大侠的方法：

//针对后台数据功能是否成功给出的不同提示信息，一般写在ajax的success或eroor中
promptBox.show();
promptBox.html('推荐成功！/取消成功！/服务器出错！！');
promptBox.fadeOut(2000);  
 
//promptBox 的CSS样式  包括字体样式与淡出样式
#promptBox {
        position: fixed; //始终固定这个提示框的显示位置在屏幕中间
        margin: 0 auto;
        
        width: 300px;
        height: 50px;
        border-radius: 5px;
        background: #777;
        border: 1px solid #ccc;
        color: #FFFFFF;
        padding: 14px 22px;
        font-size: 14px;
        font-family: "微软雅黑";
        font-weight: normal;
        color: white !important;
        opacity: .8;
        z-index: 10001;
        
        animation: fadeOut;//动画名称fadeOut淡出效果
        animation-duration: 4s;//动画时间 4秒
        -webkit-animation-duration: 4s;
        display: none;//提示框隐藏
}
//fadeOut淡出效果方法，0%时原来的透明度；100%时透明度变为0；显示为淡出
@keyframes fadeOut{
        0%{opacity: .8;}
        100%{opacity: 0;}
}
-webkit-@keyframes fadeOut{
        0%{opacity: .8;}
        100%{opacity: 0;}
}

Answer 3

写CSS吧，设置opacity，用transition实现。然后js写element.classList.add('active')或者element.classList.remove('active')
如

.active {
    opacity: 0;
}

Answer 4

var fadeOutTimer = setInterval(function(){
    var promptBoxOpac = document.getElementById('promptBox').style.opacity;
    if (Number(promptBoxOpac)) {
        promptBoxOpac = Number(promptBoxOpac) - 0.1;
    } else {
        clearInterval(fadeOutTimer);
    }
}, 30);

Answer 5

opacity

Answer 6

var box = document.getElementById('promptBox');

clearInterval(timer);
var timer = setInterval(function() {
    var target = 0; //目标是opacity=0
    var cur = Math.round(box.style.opacity);//当前opacity
    var speed = (cur - target)/8; //消失的速度
    if(cur == target) {
        //判断是否完成
        clearInterval(timer);
    } else {
        box.style.opacity = 'filter(opacity:' + (cur-speed) + ')';
        box.style.opacity = (cur - speed) / 100;
    }
    
}, 300);

Answer 7

var el = document.getElementById("promptBox");
        el.style.opacity=1;
        var stopTime = setInterval(function(){
            el.style.opacity-=0.01;
            //console.log(el.style.opacity);  显示透明的变化，
            if(! +el.style.opacity){    //如果透明度为0时 +用于将字符串转换为数字
                clearInterval(stopTime);  //结束间隔执行函数
                el.style.display='none';  //同时，设置display:none;
            }
    },10);

//对我的代码有建议有问题的欢迎评论，一起探讨

Answer 8

两个函数css() sports().基本实现了jQuery里的animate()函数，尺寸透明度的动画都可以，颜色的不行

function css(obj,attr,oval)//  获取样式/设置多个样式
{    
    if(arguments.length==2){
        if(typeof attr=='string')
        {
            if(obj.currentStyle)
                return obj.currentStyle[attr];
            else
                return getComputedStyle(obj,false)[attr];
        }
        else
        {
            for(var i in attr)
            {
                if(i=='opacity')
                {
                    obj.style[i]=attr[i];
                    obj.style['filter']="alpha(opacity="+Math.round(attr[i]*100)+")";;
                }
                else
                    obj.style[i]=attr[i];
                
            }
        }
    }
    //  设置单个样式
    else
    {
        /*
        var oshow = document.getElementById("show");
        var str = "";
        for(var k in obj.style){
            str+=k+"<br/>";
        }
        oshow.innerHTML = str;
        */
        if(attr=='opacity')
        {
            obj.style['filter']="alpha(opacity="+Math.round(oval*100)+")";;
            obj.style["opacity"] = oval;
        }
        else{
            //console.log("attr="+attr+";value="+oval);
            obj.style[attr]=oval;
        }
    }
    return obj;
}

function sports(obj,json,fn)
{
    clearInterval(obj.timer);
    obj.timer=setInterval(
        function(){
            var bStop=true;//这一次运动就结束了——所有的值都到达了
            for(var attr in json){
                //1.取当前的值
                var iCur=0;
                if(attr=='opacity')
                    iCur = parseInt(parseFloat(css(obj, attr))*100);
                else
                    iCur=parseInt(css(obj, attr));
                //2.算速度
                var iSpeed=(json[attr]-iCur)/8;
                iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
                //3.停止检测
                if(iCur!=json[attr])
                    bStop=false;
                if(attr=='opacity')
                {
                    obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
                    obj.style.opacity=(iCur+iSpeed)/100;
                }
                else
                    //obj.style[attr]=iCur+iSpeed+'px';
                css(obj,attr,iCur+iSpeed+"px");
            };
            if(bStop)
            {
                clearInterval(obj.timer);
                if(fn)
                    fn();
            }
        },30);
}