Efecto de transición FadeIn en imágenes con JavaScript

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.getElementById('fading');
  //programamos cada navegador por separado
    if (document.all){ 
	//esto es para IE
	  obj.style.filter = 'alpha(opacity='+transparency+')';
	}else{
	// Safari 1.2, posterior Firefox y Mozilla, CSS3
	  obj.style.opacity = transparency /100;
	// anteriores Mozilla y Firefox
	  obj.style.MozOpacity = transparency /100;
	// Safari anterior a 1.2, Konqueror
	  obj.style.KHTMLOpacity = 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

Usuarios que han visto este tema también han visto...

- Cambio de Imagen en JavaScript
- Funciones autoejecutables en Javascript
- Las funciones setInterval y setTimeout en JavaScript
- Compactando código javascript
- Página de inicio y favoritos

- Versión imprimible de este documento

- Enviar por e-mail este documento