Efectos elementales con JQuery

Los efectos elementales para mostrar y ocultar elementos con JQuery son bastante similares a los que se aplican con Scriptaculous.

Hay ocho funciones que los controlan:

show() y hide() muestran y ocultan un elemento de manera simple
fadeIn() y fadeOut() lo muestran u ocultan con un efecto de fade
slideDown() y slideUp() lo muestran u ocultan con un efecto deslizante
toggle() permuta el estado de un elemento, si está oculto lo muestra y viceversa
slideToggle() hace lo mismo pero con un efecto deslizante

Para utilizarlos, debemos indicar dos cosas, el elemento sobre el cual se va a aplicar el efecto y el enlace que ejecutará la función. Ambos deberían ser identificados con un ID único. Por ejemplo:

<div id="nombreContenido"> ....... el contenido ....... </div>
<a href="javascript:void(0);" id="nombreEnlaceMostrar"> MOSTRAR </a>
<a href="javascript:void(0);" id="nombreEnlaceOcultar"> OCULTAR </a>

La función sería algo así:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
  $("#nombreEnlaceMostrar").click(function () { $("#nombreContenido").show(); });
  $("#nombreEnlaceOcultar").click(function () { $("#nombreContenido").hide(); });
});
//]]>
</script>

Con el mismo tipo de sintaxis, podríamos utilizar los otros efectos:

$("#nombreEnlaceMostrar").click(function () { $("#nombreContenido").fadeIn(); });
$("#nombreEnlaceOcultar").click(function () { $("#nombreContenido").fadeOut(); });

$("#nombreEnlaceMostrar").click(function () { $("#nombreContenido").slideDown(); });
$("#nombreEnlaceOcultar").click(function () { $("#nombreContenido").slideUp(); });

Y en el caso de toggle sólo requerimos una instrucción:

$("#nombreEnlace").click(function () { $("#nombreContenido").toggle(); });

o bien:

$("#nombreEnlace").click(function () { $("#nombreContenido").slideToggle(); });