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


jQuery toggle(): Mostrar, ocultar y animar elementos en tu web

Vamos a ver el funcionamiento del efecto jQuery toggle(), mayoritariamente se usa en casos para ocultar y mostrar elementos de una página web, aunque también funciona como switch entre 2 funciones.

Cuando hablamos de mostrar no lo confundáis con jQuery load(), ya que esta función de jQuery carga un html externo en un div.

 

Otras funciones interesantes

Este efecto de jQuery es muy parecido en su sintaxis a jQuery .click(). El efecto .toggle() solo te permite alternar entre 2 acciones mientras que .click() hace una acción concreta por cada click.

Otros efectos básicos similares son jQuery slideDown(), slideUp() y slideToggle(), jQuery fadeIn(), fadeOut() y fadeTo() y jQuery show() & hide() y jQuery animate().

Sintaxis de jQuery toggle()

Os pongo las 4 maneras que hay para invocar el efecto extraídas de su documentación oficial:

Ahora os describo los parámetros:

  1. duration: Duración en milisegundos de la animación, por defecto 400.
  2. callback: Función callback que se ejecutará cuando termine la animación.
  3. easing: Función a ejecutar durante la animación, los valores son linear o swing.
  4. showOrHide: Mostrar u ocultar un elemento.

Según la documentación oficial de jQuery .toggle():

Muestra u oculta los elementos seleccionados

Ejemplo de animación básica con jQuery toggle()

En esta primera demo de ejemplo voy a esconder y mostrar un botón cada vez que se haga click en otro bóton, así vemos cómo muestra y oculta el elemento.

Explico el código de la primera demo:

  • Detectamos el click del elemento que tiene id ‘boton’ ayudándonos de la función on().
  • Tras la deteccción, .toggle() mostrará u ocultará los elementos con id ‘target’.
  • Dependiendo del estado (visible u oculto) del elemento con id ‘target’ se ocultará o mostrará, en este caso el elemento es un botón.

Animando el efecto con jQuery .toggle(«slow»), .toggle(«fast») y mediante milisegundos

Tras ver como es la llamada básica ahora toca usar los parámetros ‘slow’, ‘fast’ y los milisegundos. Con estos parámetros haremos que la animación del elemento se haga de una forma lenta o rápida dependiendo de la opción escogida.

Os pongo el código de la segundo ejemplo en la que mostraremos u ocultaremos una imagen.

Explico los diferentes parámetros pasados en las funciones tras hacer click en cada uno de los 3 botones:

  • Con el parámetro ‘slow‘ hacemos que la imagen aparezca y desaparezca de forma lenta.
  • Con ‘fast‘ la animación se realiza mucho más rápido
  • Por último he pasado como parámetro 5000 milisegundos (5 segundos) para realizar una animación personalizada a nuestro antojo.

Aquí el código de los botones y la imagen:

Cómo usar el callback de jQuery toggle()

Hasta ahora hemos visto el funcionamiento de la función con los parámetros básicos. Vamos enriquecer nuestro script invocando una función en el callback del efecto toggle(), es decir, al término de la animación.

Para verlo en funcionamiento he creado esta tercera demo de ejemplo para ocultar o mostrar una imagen con callback.

Y de nuevo comento la jugada…

  • Esta vez al hacer click en el botón se desencadena un efecto de un segundo de duración (1000 milisegundos).
  • Al término de la animación (tras mostrar u ocultar la imagen) se usa el callback para sacar un alert por pantalla avisando del final del efecto.

Aquí el código de la imagen y botón:

Con el uso del callback podéis hacer en vuestras webs otras operaciones en cadena una vez finalizado el efecto toggle().

Animaciones durante el efecto con .toggle(«swing») y .toggle(«linear»)

En esta cuarta demo vamos a ver 2 nuevos parámetros (no se usan demasiado) para cambiar el efecto levemente:

  • Con ‘linear‘ el efecto se ejecuta con velocidad constante.
  • Mientras que con ‘swing‘ el efecto va ligeramente más rapido en la mitad de la animación.

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

jQuery .toggle(showOrHide)

Este parámetro fuerza el efecto a realizar, oculta o muestra.

El parámetro es equiparable al efecto de la función jQuery show() y hide().

Alternar 2 funciones con jQuery .toggle()

Quinta demo donde podemos ver cómo intercambiar 2 funciones con jQuery toggle.

En el código se ve cómo la función ejecutará un alert u otro dependiento de la última ejecución de la misma.

Ocultando elementos como párrafos, imágenes o elementos con clases

Sexta y última demo del efecto toggle(), esta vez vamos a ver como ocultar elementos de nuestra web, bien sean párrafos, imágenes o elementos con determinadas clases.

Hasta ahora solo había puesto ejemplos que ocultaban elementos con determinados ids.

Explico las líneas superiores tras el click de los 3 botones:

  • Al clickar el botón con id ‘boton1‘ se muestran u ocultan los párrafos.
  • Al clickar el botón con id ‘boton2‘ se muestran u ocultan las imágenes.
  • Al clickar el botón con id ‘boton3‘ se muestran u ocultan los elementos con class ‘prueba’.

El código HTML es el siguiente:

Evitar conflictos con otras librerías

En caso de trabajar con otras librerías distintas a jQuery os recomiendo en caso de problemas usar jQuery noConflict().

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