jQuery, fadeIn y fadeOut

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