Vida en la Luna

Hay algunos efectos muy fáciles de implementar con Jquery. Con ellos puedes ocultar y mostrar objetos en tu página.

Como siempre, puedes ver los ejemplos en funcionamiento en una página a parte. Pulsa este enlace si quieres verlos.

Ejemplo 1 – Mostrar / Ocultar

En este ejemplo puedes ver como se muestran y ocultan unos divs. El efecto hace que se oculten y muestren por el borde superior izquierdo. Para ello estamos utilizando el código:

• $(‘.div_ejemplo1′).show(“5″): Muestra todos los objetos de la clase div_ejemplo1.
• $(‘.div_ejemplo1′).hide(“5″): Oculta todos los objetos de la clase div_ejemplo1.
• $(‘.div_ejemplo1′).toggle(“5″): Muestra o oculta, alternando según el estado en el que se encuentren, todos los objetos de la clase div_ejemplo1.

Como ves, utilizamos los selectores que os explicamos en el post Jquery, escribe menos, haz más. Por lo tanto los efectos se pueden aplicar sobre un solo objeto, sobre varios, todos los de la misma clase…

Ejemplo 2 – Deslizar

Este ejemplo es similar al anterior pero el efecto muestra y oculta los divs deslizandolos a la parte superior. Utilizamos el código:

• $(‘.div_ejemplo2′).slideDown(): Muestra todos los objetos de la clase div_ejemplo2.
• $(‘.div_ejemplo2′).slideUp(): Oculta todos los objetos de la clase div_ejemplo2.
• $(‘.div_ejemplo2′).slideToggle(): Muestra o oculta, alternando según el estado en el que se encuentren, todos los objetos de la clase div_ejemplo1.

Ejemplo 3 – Opacidad

Este ejemplo utiliza la opacidad de los divs para crear el efecto. El código:

• $(‘.div_ejemplo3′).fadeIn(): Muestra todos los objetos de la clase div_ejemplo3.
• $(‘.div_ejemplo3′).fadeOut(): Oculta todos los objetos de la clase div_ejemplo3.

Ejemplo 4

En este ejemplo puedes ver como los efectos no solo funcionan sobre divs. Aquí los utilizamos con un párrafo y con un enlace.