Animación básica en jQuery con show() y hide()

Los métodos show() y hide() proporcionan lo más básicos que se puede hacer para animar objetos en jQuery. Aunque existen otros métodos como animate, slideDown, slideUp, fadeIn y fadeOut, no hay nada como comenzar desde lo más simple y sencillo. Ambos métodos, utilizan las cadenas “slow” y “fast” que representan una duración de 200 y 600 milisegundos respectivamente, pero eso no quiere decir que no podamos personalizar la duración a nuestra necesidad. Además de eso, ambos métodos tienen un segundo parámetro opcional que es un callback o llamada a función que podemos ejecutar apenas la animación termine, quedando su síntaxis de la manera siguiente.

show(duración, callback)

O, en el caso de la otra función

hide(duración, callback)

Utilización de show() y hide()

De una manera muy sencilla, podemos decir que a cualquier elemento que queramos ocultar le agregamos el método hide() y a cualquier elemento que queramos mostrar le colocamos el método show(), por ejemplo, coloquemos un simple párrafo con un identificador

<p id="parrafo">Soy un inocente y sencillito párrafo</p>

Ahora, vamos a colocar el código necesario, pero primero hay que incluir jQuery en nuestro archivo

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>

Recordemos que el número de versión de jQuery puede diferir de acuerdo a la que este vigente en este momento. Ahora, vamos a colocar el código jQuery para ocultar el párrafo abriendo una nueva etiqueta <script>

<script type="text/javascript">
$(document).ready(function(){
$("#parrafo").hide("slow");
});
</script>

Probar el código hasta ahora

Como puede ver, el párrafo ha desaparecido, ahora vamos a hacerlo aparecer con show()

<script type="text/javascript">
$(document).ready(function(){
$("#parrafo").hide("slow");
$("#parrafo").show("fast");
});
</script>

Probar el código hasta ahora

Hecho esto, podemos usar el método show() para hacer que el texto del párrafo se pinte de rojo al finalizar de aparecer, también quitaremos la cadena “fast” y le pondremos 1200 milisegundos para ver el efecto con calma. Para ello, agregaremos el segundo parámetro opcional que es una simple llamada a una función

<script type="text/javascript">
$(document).ready(function(){
	$("#parrafo").hide("slow");
	$("#parrafo").show(1200, function(){
		$("#parrafo").css("color", "#990000");
	});
});
</script>

Probar el código hasta ahora

Un ejemplo más completo de show() y hide()

Recordando nuestro tutorial de Menú horizontal con CSS y listas, vamos a hacer un sencillo menú de tres elementos que iran apareciendo uno tras otro, gracias al uso de show() y hide(). Primero coloquemos el CSS necesario

*{
	margin: 0;
	padding: 0;
}
#menu{
	width: 300px;
	height: 40px;
	margin: 0 auto;
}
#menu ul{
	list-style: none;
}
#menu li{
	float: left;
}
#menu a{
	display: block;
	width: 100px;
	height: 30px;
	padding-top: 10px;
	text-align: center;
	color: #FFFFFF;
	background-color: #333333;
	text-decoration: none;
	float: left;
}
#menu a:hover{
	text-decoration: underline;
	background-color: #666666;
	color: #CCCCCC;
}

Luego, escribamos la lista HTML dentro de una capa

<div id="menu">
<ul>
	<li><a id="item1" href="#">Inicio</a></li>
	<li><a id="item2" href="#">Tutoriales</a></li>
	<li><a id="item3" href="#">Tips</a></li>
</ul>
</div>

Y colocamos el código jQuery necesario, anidando un poco los métodos show() para dar un efecto secuencial

<script type="text/javascript">
$(document).ready(function(){
	$("#item1").hide();
	$("#item2").hide();
	$("#item3").hide();
	$("#item1").show("fast",function(){
		$("#item2").show("fast",function(){
			$("#item3").show("fast",function(){		
			});
		});
	});
});
</script>

Probar el código hasta ahora

Recursos adicionales

1. Descargar Código completo con ejemplos
2. ¿Dudas? Pregunta en los foros