Actualidad 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

Hoy vamos a enseñaros como trabajar con las funciones fadeIn y fadeOut de Jquery, que más adelante nos servirán para trabajar con galerías de imágenes, menús desplegables, formularios interactivos, etc.

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