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?
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().
visibility: hidden makes an element invisible but does not remove it from the layout of the page. It leaves an empty box where the element was. display: none removes it from the layout so it doesn't take up any space on the page, which is usually what people want when they hide something.
Visibility:hidden makes the element invisible in a way that it still uses space at the page. Display:none makes the element have no space and be completely gone, while it still exists in the DOM.
Visibility just makes the element invisible, but it would still take up space on the screen.
