Hace unos días postee un aporte con una traducción y su explicación de algo que encontré por ahí sobre como hacer FadeIn en un div con un par de funciones de JavaScript, des pues de jugar un rato esto es lo que logré.
HTML
un div comun y corriente
Código :
<body>
<div id="fading">
<h1>FadeIn</h1>
</div>
CSS
algo de estilo para dicho div:
Código :
#fading {
width:300px;
height:75px;
border: medium solid #E70;
background:silver;
padding:10px;
font-family: verdana;
color:#EEE;
text-align:center;
letter-spacing:5px;
}
JavaScript
el codigo es bastante sencillo, en primer lugar declaramos un par de variables
Código :
var time;
var transparency = 0;
ahora vamos con la funcion propiamente dicha:
Código :
function fadeIn() {
//incrementamos el valor
transparency += 5;
//si termino la trnsicion borramos el intervalo
transparency = (transparency == 100) ?
clearInterval(time) : transparency;
//seteamos al div como objeto para poder usarlo
obj = document.getEl
ementById('fading');
//programamos cada navegador por separado
if (document.all){
//esto es para IE
obj.style.filt
er = 'alpha(opacity='+transparency+')';
}else{
// Safari 1.2, posterior Firefox y Mozilla, CSS3
obj.style.opac
ity = transparency /100;
// anteriores Mozilla y Firefox
obj.style.MozO
pacity = transparency /100;
// Safari anterior a 1.2, Konqueror
obj.style.KHTM
LOpacity = transparency /100;
}
};
y luego en el evento onLoad de la pagina, llamamos a la función fadeIn() cada 100 milisegundos:
Código :
window.onload = function() {
time = setInterval('fadeIn()',100);
};
Autor: penHolder
Autor