Es mi segunda pregunta del día relacionada con el mismo problema, así que me disculpo por eso.

Pude armar una función para "desvanecer" un elemento, y funciona bien, mi problema es que cuando trato demarcha atrás así que el elemento "se desvanece" no funciona. He tratado de cambiar lo obvio, pero no puedo entender lo que estoy haciendo mal.

Mi código hasta ahora es el siguiente:

Dado que tengo un "div" así:

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

La función de JavaScript que estoy usando para desvanecerlo es:

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

¿Podría alguien echarle un vistazo a esto y hacerme saber lo que estoy haciendo mal? Todo lo que quiero hacer es "FUNDIR" un elemento a una opacidad igual a "1".

Por cierto, no puedo usar jQuery, sin embargo, estoy ansioso por aprender de esta manera.

Gracias

Mi intento de revertir la función es el siguiente:

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