Empezaremos como siempre, añadiendo jQuery a nuestro sitio web, y vamos a definir unas variables de tiempo, para poder cambiar rápidamente la duración de nuestra animación, el tiempo del fade, el tiempo de inicio, etc.

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var tiempo_inicio_anim = 200;
	var tiempo_entre_img = 3000;
	var tiempo_fade = 1000;
});
</script>

Una vez hemos definido las variables, utilizando setTimeout vamos a ejecutar una función con la variable tiempo_inicio_anim que nos dirá cuando ejecutar la animacion:

<script type="text/javascript">
$(document).ready(function(){

	var tiempo_inicio_anim = 200;
	var tiempo_entre_img = 3000;
	var tiempo_fade = 1000;

	function animacion_simple() {

	}

	setTimeout(function() {
		animacion_simple();
	}, tiempo_inicio_anim);

});
</script>

A los 200 milisegundos como indica la variable tiempo_inicio_anim, ejecutaremos la función animacion_simple();

Vamos a añadir 3 imágenes para hacer fadeIn y fadeOut.

<div class="animacion_img">
<img src="foto1.jpg" width="600" height="450" class="foto1" />
<img src="foto2.jpg" width="600" height="450" class="foto2" />
<img src="foto3.jpg" width="600" height="450" class="foto3" />
</div>

Una vez que ya tenemos hecho el principio de nuestro script para que inicie la animación, y el HTML con las 3 imágenes, vamos a hacer la animación tirando de fadeIn y fadeOut, mostrando y ocultando las 3 imágenes de nuestro ejemplo:

<script type="text/javascript">
$(document).ready(function(){

	var tiempo_inicio_anim = 200;
	var tiempo_entre_img = 3000;
	var tiempo_fade = 1000;

	function animacion_simple() {

		// Mostramos la foto 1
		$(".foto1").fadeIn(tiempo_fade);

		// Cuando pasen otros 3000 milisegundos, ocultamos la foto 1 y mostramos la foto 2
		setTimeout(function() {
			// Ocultamos la foto 1
			$(".foto1").fadeOut(tiempo_fade);
			// Mostramos la foto 2
			$(".foto2").fadeIn(tiempo_fade);
		}, tiempo_entre_img);

		// Cuando pasen otros 3000 milisegundos, ocultamos la foto 2 y mostramos la foto 3
		setTimeout(function() {
			// Ocultamos la foto 2
			$(".foto2").fadeOut(tiempo_fade);
			// Mostramos la foto 3
			$(".foto3").fadeIn(tiempo_fade);
		}, tiempo_entre_img*2);

		// Cuando pasen otros 3000 milisegundos, ocultamos la foto 3 y volvemos a iniciar la animación
		setTimeout(function() {
			// Ocultamos la foto 3
			$(".foto3").fadeOut(tiempo_fade);
			// Iniciamos otra vez la animación
			animacion_simple();
		}, tiempo_entre_img*3);

	}

	//Empezamos la animación a los 200 milisegundos
	setTimeout(function() {
		animacion_simple();
	}, tiempo_inicio_anim);

});
</script>

Ya tenemos el Script terminado, se podría haber hecho un poco más automático, buscando el número de imágenes dentro del div animacion_img, pero para empezar, es un ejemplo bastante sencillo y creo que legible y facil de entender para todos.

Aquí tenéis el ejemplo.

• Ejemplo

Con estas funciones podemos añadir un efecto fade en imágenes, capas, textos, etc, en nuestros sitios web.

fadeIn es para mostrar y fadeOut es la inversa, para ocultar, funcionan de la siguiente forma:

fadeIn( tiempo_milisegundos , función_callback );
fadeOut( tiempo_milisegundos , función_callback );

Por defecto el tiempo_milisegundos es de 400, en realizar el efecto. Mostramos un ejemplo:

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".imagen1").fadeIn();
});
</script>

En este ejemplo, se aplicaría el efecto fade a la imagen con clase imagen1. Otra forma podría ser aplicar el efecto, una vez hayamos hecho click sobre un botón, como el siguiente ejemplo:

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#boton').click(function() {
		$(".imagen1").fadeIn();
	});
});
</script>

En estos ejemplos, utilizaríamos el valor por defecto del fadeIn / fadeOut de 400 milisegundos y sin función callback. La función callback la podríamos utilizar para ejecutar otra acción una vez terminado el efecto, como en este ejemplo:

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#imagen3botonact').click(function() {
		$(".imagen3").fadeIn(2000,accion_despues_de_mostrar_imagen);
	});
	function accion_despues_de_mostrar_imagen () {
		alert("Imagen mostrada");
	}
});
</script>

Aquí tenéis varios ejemplos con fadeIn y fadeOut.

• Ejemplo