Why does jQuery show/hide use display:none instead of visibility:hidden?

javascript jquery visibility
isayno picture isayno · Jul 21, 2009 · Viewed 27.5k times · Source

display:none means that the element isn't rendered as part of the DOM, so it's not loaded until the display property changes to something else.

visibility:hidden loads the element, but does not show it.

Why does jQuery use display:none for its show/hide functions instead of switching between visibility:hidden and visibility:visible?

Answer

Salty picture Salty · Jul 21, 2009

Because in display:none, the element, for all purposes, ceases to exist -- it doesn't occupy any space. However, in visibility:hidden, it's as if you had just added opacity:0 to the element -- it occupies the same amount of space but just acts invisible.

The jQuery creators probably thought the former would be a better fit for .hide().

Related questions

How do I check if an element is hidden in jQuery?

Is it possible to toggle the visibility of an element, using the functions .hide(), .show() or .toggle()? How would you test if an element is visible or hidden?

Read More
Equivalent of jQuery .hide() to set visibility: hidden

In jQuery, there are .hide() and .show() methods which sets the CSS display: none setting. Is there an equivalent function which would set the visibility: hidden setting? I know I can use .css() but I prefer some function like .hide() …

Read More
jQuery css Visibility with animation

I have few div's placed underneath each other and I'm using css visibility to fade them in and out. The reason why I use visibility is so that the div's don't move place. For fade In I'm using: $('.drop1…

Read More