First: use CSS properties

var display =$('#id').css('display');
if(display == 'none'){
   alert(" You found me, I'm hidden! ");
}

Second: use jquery built-in selectors

So let’s say we have this TAB on our page,

<div id="test">
<p> Just for testing purposes </p>
</div>

So, we can use the following statement to determine whether the tag with id “test” is hidden:

if($("#test").is(":hidden")){...} // The premise is that the jQuery The library of

In this way, we can easily determine whether an element is hidden or not and set the animation according to its state, such as:

if($("#test").is(":hidden")){
       $("#test").show();    //If the element is hidden, it appears
}else{
      $("#test").hide();     //If the element is visible, hide it
}

JQuery determines whether an element is displayed or hidden

var node=$('#id');

The first way to write it

if(node.is(':hidden')){　　//Show the node element if the node is hidden, otherwise hide
　　node.show();　
}else{
　　node.hide();
}

The second way

if(!node.is(':visible')){　　//Show the node element if the node is hidden, otherwise hide
　　node.show();　
}else{
　　node.hide();
}
if(node.is(':visible')){　　//Hide the node element if it is displayed, otherwise
　　node.hide();
}else{
　　node.show();
}

JQuery determines whether an object is shown or hidden

Js code

// jQuery("#tanchuBg").css("display") 
// jQuery("#tanchuBg").is(":visible") 
// jQuery("#tanchuBg").is(":hidden") 

Js code

$(element).is(":visible") // Checks for display:[none|block], ignores visible:[true|false] 

Js code

$('element:hidden') 
$('element:visible') 

Js code

$(".item").each(function() 
{ 
    if ($(this).css("visibility") == "hidden") 
    { 
        // handle non visible state 
    } 
    else 
    { 
        // handle visible state 
    } 
}) 

Js code

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

Js code

if( $(this).css("display") == 'none' ){ 
 
     
} 
else{ 
 
     
}