Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL, AMP y htaccess


jQuery show() y hide(): mostrar y ocultar divs, ids, clases…

Repaso a las funciones de jQuery show() y hide(), se usan para mostrar y ocultar elementos del DOM de la web, mayoritariamente suelen ser divs, ids, clases, imágenes, elementos de formularios, etiquetas…

El uso combinado de estas 2 funciones de jQuery emula la funcionalidad básica de jQuery toggle() que muestra y oculta elementos. Otros funciones de efectos básicos son:

Sintaxys de jQuery show() y hide()

Siguendo la documentación oficial de show() y hide() vamos a repasar sus sintaxis:

Os detallo los diferentes parámetros de la sintaxis:

  • selector: Es el elemento que queremos mostrar u ocultar:
    Si es un id –> $(#nombre del id)
    Si es una clase –> $(.nombre de la clase)
    Si es etiqueta –> $(nombre de la etiqueta)
  • duracion (opcional): Velocidad de la animación en milisegundos. También se pueden usar los valores “slow” y “fast”.
  • easing (opcional): Tipo de animación a ejecutar, las 2 posibilidades son: “linear” y “swing“. Linear sería una animación constante y swing una amimación con cambios de ritmo.
  • callback (opcional): Función callback a ejecutarse una vez finalizada la animación.

Diferentes opciones de parámetros a usar con jQuery show() y hide()

Veamos las difeentes parámetros que podemos usar:

  1. duration: Velocidad en milisegundos de la animación.
  2. easing: Función que se ejecuta durante la animación.
  3. complete: Función que se ejecuta cuando termina la animación.
  4. done: Función que se ejecuta cuando termina correctamente (sin errores) la animación.
  5. fail: Función que se ejecuta cuando no se ejecuta correctamente (con errores) la animación.
  6. always: Función que se ejecuta cuando termina la animación, bien sea con errores, sin ellos o cuando se para sin ser completada.
Área de acción de show() y hide()

Es importante tener en cuenta que estas 2 funciones actuan sobre un único elemento (El primero en el DOM de la web).

Por ejemplo, si tenemos 2 imágenes con el mismo id, actuarán sobre la imagen que esté primero en el código fuente.

Ejemplo básico de jQuery show() y hide()

En este primer ejemplo de jQuery show() y hide() vamos a ver cómo se ocultan y muestran elementos de la web.

Os explico el ejemplo:

  • Tenemos 2 elementos para mostrar y ocultar, son una imagen y un botón.
  • Al clickar en el botón ‘click para ocultar elementos‘ ocultamos los elementos con hide(), el botón se oculta haciendo mención a su id = ‘target’ –> (#target), mientras que la imagen se oculta al mencionar su clase = ‘target’ –> (.target).
  • Al clickar en el botón ‘click para mostrar elementos‘ mostramos de nuevo los elementos con show(), el botón se muestra haciendo mención a su id = ‘target’ –> (#target), mientras que la imagen se muestra al mencionar su clase = ‘target’ –> (.target).
  • Los clicks los he controlado con la función on().

El código HTML de los botones e imágenes es el siguiente:

Asignar un tiempo de duración a la animación

En este segundo ejemplo vamos a ver cómo ocultar y mostrar elementos con una duración varios segundos.

El código de este ejemplo es similar al anterior, con la diferencia de los parámetros que pasamos a las funciones.

El parámetro ‘slow‘ indica una animación lenta, bien sea ocultando o mostrando los elementos. Mientras que el parámetro ‘fast‘ indica una animación rápida. También hemos pasado el parámetro ‘3000’, que es la duración en milisegundos.

Los clicks los he controlado con la función jQuery click(). El código de los botones e imágenes es el mismo.

Añadir un callback a jQuery show() y hide()

Vamos a añadir un callback que se ejecutará una vez finalizada la animación. Para verlo en funcionamiento tenemos este tercer ejemplo.

Este ejemplo es similar a los anteriores, se ha añadido el callback después de que la imagen aparezca y desaparezca mostrando un mensaje por pantalla.

El código HTML de la imagen y botón es el siguiente:

Añadir los parámetros de animación easing swing y linear

En este cuarto ejemplo vamos a probar los parámetros swing y linear:

En el ejemplo no se aprecian los cambio de ritmo de la animación en el parámetro ‘swing’, recomiendo usar siempre fast, slow o milisegundos.

Selectores de jQuery

Para la detección, control o selección de elementos con jQuery os recomiendo leer este post:

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies