Como verifico se um elemento está oculto no jQuery?

Se você está precisando alternar a visibilidade de um elemento, usando a função .hide() ou .show() e necessita testar se um elemento é visible ou hidden este artigo vai te mostrar como resolver isso.

Se for para um único elemento, este código pode ser mais adequado:

// Verifica o conteúdo CSS para exibição:[none|block], ignora a visibilidade:[true|false]
$(element).is(":visible");

// O mesmo funciona com oculto
$(element).is(":hidden");

Você pode usar o hidden seletor:

// Corresponde a todos os elementos que estão ocultos
$('element:hidden')

E o visible seletor:

// Corresponde a todos os elementos visíveis
$('element:visible')

Este outro método não considera a visibilidade do pai. Para considerar o pai também, você deve usar .is(":hidden")ou .is(":visible").

if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // 'elemento' está oculto
}

Por exemplo:

<div id="div1" style="display:none">
  <div id="div2" style="display:block">Div2</div>
</div>

O método acima considerará div2 visível enquanto :visible não. Mas o acima pode ser útil em muitos casos, especialmente quando você precisa descobrir se há algum erro divs visível no pai oculto porque em tais condições :visible não funcionará.

Caso você utilize seletores jQuery que por padrão podem haver uma sintaxe mais condensada do que visibilidade do CSS considere esse exemplo que é boa para lidar com visibility literalmente:

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // lidar com estado não visível
    } else {
        // lidar com o estado visível
    }
});

Você também pode determinar se um elemento está recolhido ou não usando os seletores :visible e .:hidden por exemplo:

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

Se você está simplesmente agindo em um elemento com base em sua visibilidade, você pode simplesmente incluir :visible ou :hidden na expressão do seletor. Por exemplo:

$('#myDiv:visible').animate({left: '+=200px'}, 'slow');

Você viu que existe muitas maneiras de fazer, portanto se você tiver um seletor e quiser executar alguma ação nele apenas se estiver visível ou oculto, poderá usar filter(“:visible”) ou filter(“:hidden”) seguir encadeando-o com a ação que deseja executar.

Então, em vez de uma if declaração, assim:

if ($('#btnUpdate').is(":visible"))
{
     $('#btnUpdate').animate({ width: "toggle" });   // Botão Ocultar
}

Ou mais eficiente, mas ainda mais feio:

var button = $('#btnUpdate');
if (button.is(":visible"))
{
     button.animate({ width: "toggle" });   // Botão Ocultar
}

Você pode fazer tudo em uma linha:

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });

260

O :visible seletor de acordo com a documentação do jQuery : https://api.jquery.com/hidden-selector/