JQuery – #10. Efectos

Unidad
Materiales

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:

¡Ups! ¡Este contenido está restringido a codelovers! Inicia sesión o, si aún no eres miembro de Didacticode, regístrate!