jQuery gotcha: visibility vs. :visible
– comments
Something I ran into today - the behaviour of jQuery’s :visible
selector (and its sister selector :hidden
) is somewhat unintuitive - at least after version 1.3.2. From the jQuery docs:
Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout.
This means, that if we have code like this:
1 2 3 4 | $elem.css("visibility", "hidden") if($elem.is(":hidden")) alert("ELEM IS HIDDEN"); if($elem.is(":visible")) alert("ELEM IS VISIBLE"); |
We’ll (incorrectly) be told “ELEM IS VISIBLE”. To take opacity
and visibility
into account, you’ll have to do something like this:
1 2 3 4 5 | if($elem.is(":hidden") || $elem.css("visibility") == "hidden" || $.elem.css("opacity") == 0) { alert("ELEM IS HIDDEN") } else { alert("ELEM IS VISIBLE"); } |