jQuery: Mostrar y Ocultar Elementos

En este tutorial, me gustaría mostrarle cómo hacer desaparecer un elemento HTML visible o hacer que uno invisible sea visible nuevamente con la ayuda de JavaScript y jQuery.

Además, al final de este tutorial, observamos cómo puede cambiar fácilmente de un lado a otro entre la visibilidad y la invisibilidad de un elemento utilizando la función toggle.

• Mostrar Elementos
• Ocultar Elementos
• Toggle - Mostrar y ocultar Elementos alternativamente
• Influir en la Duración de la Sobreimpresión o la Ocultación

Mostrar Elementos

Como punto de partida, tenemos el siguiente contenedor DIV invisible.

<div id="d" style="display:none">Invisible</div>

Nos gustaría mostrar este cuadro ahora. Para hacer visible un elemento HTML, jQuery proporciona la función .show(), que ahora solo llamamos con el ID del cuadro DIV.

$("#d").show();

Con un # precedente podemos referirnos a elementos a través de sus ID, con un punto anterior. podemos abordar varios elementos usando sus nombres de clase.

Ocultar Elementos

Similar a la función .show(), jQuery proporciona la función .hide() para ocultar elementos.

$("#d").hide();

De lo contrario, esta función funciona de la misma manera como .show().

Toggle - Mostrar y ocultar Elementos alternativamente

A veces tenemos la situación en la que queremos hacer que un elemento sea visible o invisible alternativamente, dependiendo del estado en el que se encuentre actualmente el elemento. Pero no necesitamos escribir una función elaborada con .show() y .hide() porque jQuery da usamos la función .toggle().

$("#d").toggle();

Con .toggle(), el cuadro DIV con el ID "d" se mostrará aquí si está actualmente invisible u oculto si está visible actualmente.

Influir en la Duración de la Sobreimpresión o la Ocultación

Si la decoloración de los elementos es demasiado rápido o demasiado lento para nosotros, podemos pasar un valor de tiempo en milisegundos a las funciones .show(), .hide() y .toggle() como un parámetro que indique cuánto tiempo debe tardar la función.

El valor predeterminado es 400 ms. Si se tarda el doble de tiempo, podemos escribir .show(800), por ejemplo. Además de cualquier valor numérico, también podemos pasar una de las cadenas "slow" o "fast" a la función que representa 600 o 200 ms.