Efecto fade con setInterval

[Tecktonikrazy]

Es una simple funcion para un efecto tipo "fade" en un div. Si
opacity es igual a 10, esta deve disminuir de .1 en .1 cada 100 milisegundos, y si es igual a 0, deve aumentar. he visto otras funciones para hacer este efecto pero yo quiero el codigo lo mas simple que se pueda, sin usar bibliotecas, y no entiendo porque no funciona esto.

Código HTML:

<div id="box" style="opacity:10;width:100px;height:100px;background:#FF0000;"></div>

<input type="button" value="Fade" onclick="fade('box');"/> 

Código Javascript:

function fade(id){
 
var element = document.getElementById(id);
 
if(element.style.opacity == 10){
setInterval("element.style.opacity -= .1",100);
} else if(element.style.opacity == 0){
setInterval("element.style.opacity += .1",100);
}
}
 

[caricatos]

Hola:

Tal vez si element lo definieras fuera de la función...

Bueno, setInterval se ejecuta sin parar... en estos casos es más recomendable setTimeout, o cortar el bucle con clearInterval.

Te paso un código que quizá te sirva: Pseudo-lightbox... fíjate en la parte de transiciones...

Saludos