jQuery gotcha: visibility vs. :visible

22nd May 2012 – 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");
}