jQuery: cómo verificar si un elemento está oculto? (explicación para principiantes)

Introducción: por qué esta pregunta preocupa a todo desarrollador frontend

Imagine la situación: está escribiendo una página interactiva con un menú desplegable, una ventana modal o un acordeón. El usuario hace clic en un botón y el bloque debe aparecer o desaparecer suavemente. Pero, ¿qué pasa si accidentalmente intenta animar un elemento ya oculto? ¿O, por el contrario, muestra algo que ya es visible? El resultado: errores, una interfaz que titubea y usuarios decepcionados.

Por eso la pregunta "How do I check if an element is hidden in jQuery?" es una de las más populares en Stack Overflow. Tiene más de mil respuestas, y no es casualidad. Saber determinar correctamente la visibilidad de un elemento es una habilidad básica que le ahorrará horas de depuración.

En este artículo, analizaremos en detalle cómo verificar si un elemento está oculto con jQuery. Conocerá las trampas, las diferencias entre display:none y visibility:hidden, y aprenderá a escribir código confiable. ¡Comencemos!

El método .is(':hidden') — su herramienta principal

La forma más simple y común de verificar si un elemento está oculto es usar el método .is() con el pseudoselector :hidden. jQuery lo proporciona de forma nativa.

Cómo funciona

El selector :hidden en jQuery selecciona elementos que:

\n
• Tienen la propiedad CSS display: none;
\n
• Son elementos de tipo <input type="hidden">;
\n
• Tienen ancho y alto iguales a cero (por ejemplo, width: 0; height: 0);
\n
• Son descendientes de un padre oculto (heredan la invisibilidad).
\n

Así es como se ve una verificación simple:

// Verificamos si el elemento con id="myDiv" está oculto\nif ($('#myDiv').is(':hidden')) {\n    console.log('¡El elemento está oculto!');\n} else {\n    console.log('El elemento es visible.');\n}

Verificación de visibilidad con .is(':visible')

Para la lógica inversa, use el selector :visible:

if ($('#myDiv').is(':visible')) {\n    console.log('El elemento es visible en la página.');\n}

Ambos enfoques funcionan rápido y son intuitivos. Pero hay un detalle: ¿qué pasa si el elemento está oculto con visibility: hidden u opacity: 0? jQuery considera estos elementos como visibles, lo que a menudo sorprende a los principiantes.

Trampas: visibility: hidden y opacity: 0

Muchos desarrolladores asumen erróneamente que :hidden reacciona a cualquier forma de ocultar un elemento. No es así.

Ejemplo con visibility: hidden

La propiedad visibility: hidden hace que un elemento sea invisible, pero aún ocupa espacio en la página. jQuery considera dicho elemento como visible, ya que sus dimensiones no son cero.

<div id="myBox" style="visibility: hidden;">Soy invisible, pero ocupo espacio</div>\n\n<script>\nconsole.log( $('#myBox').is(':hidden') );  // false\nconsole.log( $('#myBox').is(':visible') ); // true\n</script>

Ejemplo con opacity: 0

Lo mismo aplica para la transparencia:

<div id="transparentBox" style="opacity: 0;">Transparente, pero visible para jQuery</div>\n\n<script>\nconsole.log( $('#transparentBox').is(':hidden') );  // false\n</script>

Si su código usa fadeIn()/fadeOut() o animación de transparencia, la verificación estándar con :hidden le fallará. Para estos casos, necesita verificar la propiedad CSS específica.

Cómo verificar visibility: hidden u opacity: 0

Cuando necesite saber si un elemento está oculto específicamente con estas propiedades, use .css():

Verificación de visibility

var isVisibilityHidden = ($('#myElement').css('visibility') === 'hidden');\nif (isVisibilityHidden) {\n    console.log('El elemento está oculto mediante visibi