原生js为何无法实现渐显效果?

Question

function addOpacity(id){
var dopacity=0.05;
var obj=document.getElementById(id);
obj.style.opacity+=dopacity;
}
function graduallyShow(id){
var time;
var obj=document.getElementById(id);
time=setInterval(function(){
if(obj.style.opacity<1){
addOpacity(id);
}else{clearInterval(time)}
},50);
}
graduallyShow('div1');

Answer 1

opacity要ie9+才支持，ie8-用alpha滤镜，确认你浏览器对了没有。。并且obj.style.opacity是字符串，+=是字符串操作，要转换为数字后再操作

 <div id="div1" style="opacity:0;background:#000;color:#fff">文字内容</div>
<script>
    function addOpacity(id) {
        var dopacity = 0.05;
        var obj = document.getElementById(id);
        var opacity = parseFloat(obj.style.opacity);
        opacity = isNaN(opacity) ? 1 : opacity;//防止style未定义opacity，通过样式定义的
        obj.style.opacity = opacity + dopacity;
    }
    function graduallyShow(id) {
        var time;
        var obj = document.getElementById(id);
        time = setInterval(function () {
            if (obj.style.opacity < 1) {
                addOpacity(id);
            } else { clearInterval(time);console.log('clear') }
        }, 50);
    }
    graduallyShow('div1');
</script>