Question

If I have the HTML below:

<div style="display:none;">
    <span id="hello">Hey</span>
</div>

And I do alert($("#hello").css("display"));, it will say “inline”. The span is clearly not visible, but since it doesn’t directly have a display:none; property on it, it still says it’s viewable.

How do I test whether a certain DOM element is actually visible or not, even if its parent or a parent of its parent is not displaying?

Answer 1

You can use:

if ($('#myitem').is(':visible')){

/*Do some sort of stuff in here */

}

Items still animating (like using .hide or .fadeOut) will be “visible” until the animation is complete