jquery visibility selector

Question

I'd like to know if there's anything incorrect in the following :

    if($('#three').is(':visible')) {
        alert("visible");
    } else {
        alert("hidden");    
    }

Thanks

Answer 1

Make sure that #three has display attribute set to some default value. E.g. Display="none"

Answer 2

Your code seems correct to me. However, visible selector on jQuery defines a not visible elements if:

• 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.

Is it the case in your test?

Some others importants aspect regarding this selector is that elements with visibility: hidden or opacity: 0 are considered to be visible!

Also, since 1.3.2, this selector has evolved, as stated in the changelog.

Answer 3

Better you check this : :visible Selector

<script>
 if( $('#foo').is(':visible') ) {
    // it's visible, do something
}
else {
    // it's not visible so do something else
}

if( $('#foo').is(':hidden') ) {
    // it's hidden, do something
}
else {
    // it's not hidden so do something else
}

</script>