:visible selector according to the jQuery documentation:
- They have a CSS
display value of
- They are form elements with
- Their width and height are explicitly set to 0.
- An ancestor element is hidden, so the element is not shown on the page.
visibility: hidden or
opacity: 0 are considered to be visible, since they still consume space in the layout.
This is useful in some cases and useless in others, because if you want to check if the element is visible (
display != none), ignoring the parents visibility, you will find that doing
.css("display") == 'none' is not only faster, but will also return the visibility check correctly.
If you want to check visibility instead of display, you should use:
.css("visibility") == "hidden".
Also take into consideration the additional jQuery notes:
:visible is a jQuery extension and not part of the CSS specification, queries using
:visible cannot take advantage of the performance boost provided by the native DOM
querySelectorAll() method. To achieve the best performance when using
:visible to select elements, first select the elements using a pure CSS selector, then use
Also, if you are concerned about performance, you should check Now you see me… show/hide performance (2010-05-04). And use other methods to show and hide elements.