jQuery: como verificar se um elemento está oculto? (explicação para iniciantes)

Introdução: por que essa questão preocupa todo desenvolvedor frontend

Imagine a situação: você está escrevendo uma página interativa com um menu suspenso, janela modal ou acordeão. O usuário clica em um botão, e o bloco deve aparecer ou desaparecer suavemente. Mas e se você acidentalmente tentar animar um elemento já oculto? Ou, ao contrário, mostrar algo que já está visível? O resultado — bugs, interface instável e usuários frustrados.

É por isso que a pergunta "How do I check if an element is hidden in jQuery?" é uma das mais populares no Stack Overflow. Ela tem mais de mil respostas, e isso não é por acaso. Saber determinar corretamente a visibilidade de um elemento é uma habilidade básica que economizará horas de depuração.

Neste artigo, vamos analisar detalhadamente como verificar se um elemento está oculto com jQuery. Você conhecerá as armadilhas, as diferenças entre display:none e visibility:hidden, e aprenderá a escrever código confiável. Vamos lá!

Método .is(':hidden') — sua principal ferramenta

A maneira mais simples e comum de verificar se um elemento está oculto é usar o método .is() com o pseudosseletor :hidden. O jQuery fornece isso nativamente.

Como funciona

O seletor :hidden no jQuery seleciona elementos que:

\n
• Possuem a propriedade CSS display: none;
\n
• São elementos do tipo <input type="hidden">;
\n
• Possuem largura e altura iguais a zero (ex.: width: 0; height: 0);
\n
• São descendentes de um pai oculto (herdam a invisibilidade).
\n

Veja como é feita a verificação mais simples:

// Verifica se o elemento com id="myDiv" está oculto\nif ($('#myDiv').is(':hidden')) {\n    console.log('Elemento oculto!');\n} else {\n    console.log('Elemento visível.');\n}

Verificação de visibilidade com .is(':visible')

Para a lógica inversa, use o seletor :visible:

if ($('#myDiv').is(':visible')) {\n    console.log('Elemento visível na página.');\n}

Ambas as abordagens funcionam rapidamente e são intuitivas. Mas há um detalhe: e se o elemento estiver oculto com visibility: hidden ou opacity: 0? O jQuery considera esses elementos como visíveis, o que muitas vezes surpreende os iniciantes.

Armadilhas: visibility: hidden e opacity: 0

Muitos desenvolvedores acreditam erroneamente que :hidden reage a qualquer forma de ocultar um elemento. Isso não é verdade.

Exemplo com visibility: hidden

A propriedade visibility: hidden torna o elemento invisível, mas ele ainda ocupa espaço na página. O jQuery considera esse elemento visível, pois suas dimensões não são zero.

<div id="myBox" style="visibility: hidden;">Estou invisível, mas ocupo espaço</div>\n\n<script>\nconsole.log( $('#myBox').is(':hidden') );  // false\nconsole.log( $('#myBox').is(':visible') ); // true\n</script>

Exemplo com opacity: 0

O mesmo se aplica à transparência:

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

Se o seu código usa fadeIn()/fadeOut() ou animação de transparência, a verificação padrão com :hidden vai falhar. Para esses casos, é necessário verificar a propriedade CSS específica.

Como verificar visibility: hidden ou opacity: 0

Quando você precisa saber se um elemento está oculto especificamente com essas propriedades, use .css():

Verificação de visibility

var isVisibilityHidden = ($('#myElement').css('visibility') === 'hidden');\nif (isVisibilityHidden) {\n    console.log('Elemento oculto via visibility');