使用原始javascript淡化HTML元素

Question

这是我与同一问题有关的第二个问题,所以我为此道歉.

我能够组合一个功能来"淡出"一个元素,它工作正常,我的问题是,当我试图反转它,所以元素"淡入"它不起作用.我试图改变明显的,但我无法理解我做错了什么.

我的代码到目前为止如下:

鉴于我有一个像这样的"div":

<div id="test" style="width:200px; height:200px; display:block; opacity:1; background-color:red;"></div>

我用来淡出它的JavaScript函数是:

var getElement = document.getElementById('test');
function fadeOut(elem, speed){
if(!elem.style.opacity){
    elem.style.opacity = 1;
}
var desvanecer = setInterval(function(){
    elem.style.opacity -= .02;
    if(elem.style.opacity < 0){
        clearInterval(desvanecer);
    }
}, speed / 50);
}
fadeOut(getElement, 500);

有人可以看看这个,让我知道我做错了什么,我想做的就是"FADE IN"一个不透明度等于"1"的元素.

顺便说一句,我不能使用jQuery,但我渴望以这种方式学习.

谢谢

我试图扭转这个功能如下:

var getElement = document.getElementById('test');
function fadeIn(elem, speed){
if(elem.style.opacity){
    elem.style.opacity = 0;
}
var desvanecer = setInterval(function(){
    elem.style.opacity += .02;
    if(elem.style.opacity > 1){
        clearInterval(desvanecer);
    }
}, speed / 50); 
}
fadeIn(getElement, 500);

Answer 1

setInterval在全局范围内运行,因此您需要相对于窗口定义计时器.

你不能连接从style属性返回的字符串值并期望一个数字 - 你会得到'0.02.02.02.02'

强制字符串中的数字,然后添加.02.

它适用于某些浏览器,但9之前的IE需要不同的表达式来设置和读取不透明度.

function fadeIn(elem, speed){
    if(elem.style){
        elem.style.opacity= '0';
    }
    window.fadetimer= setInterval(function(){
        elem.style.opacity= +(elem.style.opacity)+.02;
        if(elem.style.opacity> 1){
            clearInterval(fadetimer);
        }
    },
    speed);
}