Menu
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?
751
visibility: hidden preserve the space, whereas display: none doesn't preserve the space. Show activity on this post. visibility:hidden will keep the element in the page and occupies that space but does not show to the user. display:none will not be available in the page and does not occupy any space.
visibility: hidden hides the element, but it still takes up space in the layout. display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.
invisible = function() { return this. each(function() { $(this). css("visibility", "hidden"); }); }; $.
jQuery hide() Method The hide() method hides the selected elements. Tip: This is similar to the CSS property display:none. Note: Hidden elements will not be displayed at all (no longer affects the layout of the page).
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().
93
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
