jQuery gotcha: visibility vs. :visible

Alex Peattie

/

22 May, 2012

1 minute read

/ 1 comment

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:

$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:

if (
  $elem.is(':hidden') ||
  $elem.css('visibility') == 'hidden' ||
  $.elem.css('opacity') == 0
) {
  alert('ELEM IS HIDDEN')
} else {
  alert('ELEM IS VISIBLE')
}