JQuery – #10. Efectos

jQuery es una librería ideal para añadir efectos y animaciones a nuestros elementos HTML.

Para crear efectos, utilizaremos la siguiente sintaxis sobre el elemento o elementos elegidos:

$(selector).efecto(velocidad)

Donde velocidad puede ser slow, fast, o expresada en un número de milisegundos.

Además, podemos crear nuestras propias velocidades con la siguiente sentencia donde muyRapido es el nombre que damos a nuestra velocidad:

jQuery.fx.speeds.muyRapido = 50;

Pero veamos ahora otros efectos que podemos crear utilizando jQuery:

• .hide(): oculta el elemento.
• .show(): muestra el elemento.
• .toggle(): muestra el elemento si está oculto y viceversa.
• .fadeIn(): muestra un elemento con un fundido de entrada.
• .fadeOut(): oculta un elemento con un fundido de salida.
• .fadeToggle(): oculta un elemento con un fundido de salida si está visible o lo muestra con un fundido de entrada si está oculto.
• .fadeTo(): realiza un fundido hasta una opacidad indicada con un parámetro numérico entre 0 y 1.
• .slideDown(): muestra un elemento con un efecto de persiana de arriba a abajo.
• .slideUp(): oculta un elemento con un efecto de persiana de abajo a arriba.
• .slideToggle(): muestra u oculta un elemento con un efecto persiana en función de si está o no visible.

En el siguiente vídeo podrás ver el funcionamiento de todos estos efectos con eventos asociados a elementos: