Animación simple utilizando fadeIn y fadeOut de jQuery

Hace poco os enseñamos como trabajar con las funciones fadeIn y fadeOut de jQuery, pero con ejemplos poco prácticos, hoy vamos a darle un uso bastante práctico para hacer pequeñas animaciones sin Flash, con HTML y jQuery.

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