jQuery is(':visible') acting funny.

Consider this HTML:

<div id="div1" style="display: none;">
    <div id="div2">
        <p>Some div content</p>
    </div>
</div>

and this JavaScript:

$myObject = jQuery('#div2');
alert($myObject.css('display')); // 'block'
alert($myObject.is(':visible')); // false

There are multiple reasons $myObject may not be visible, even though it has display: none style set. See :visible selector docs for details.

Does it make sense now?

The :visible selector is not equivalent with the display css property.

From the linked documentation, visible is false when:

• They have a CSS display value of none.
• They are form elements with type="hidden".
• Their width and height are explicitly set to 0.
• An ancestor element is hidden, so the element is not shown on the page.

From the :visible Selector documentation:

Elements can be considered hidden for several reasons:

• They have a CSS display value of none.
• They are form elements with type="hidden".
• Their width and height are explicitly set to 0.
• An ancestor element is hidden, so the element is not shown on the page.

Check that none of these other conditions are true.