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.
display:none表示元素不是作为DOM的一部分呈现的，因此在显示属性更改为其他内容之前不会被加载。
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?
为什么jQuery使用display:none用于显示/隐藏函数，而不是切换可见性:隐藏和可见性:可见?
5 个解决方案
#1
65
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.
因为在显示中:none，这个元素，无论出于什么目的，都不再存在——它不占据任何空间。但是，在可视性:hidden中，就好像您刚刚添加了不透明度:0到元素中——它占用了相同的空间，但只是操作不可见。
The jQuery creators probably thought the former would be a better fit for .hide().
jQuery创建者可能认为前者更适合.hide()。
#2
18
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.
可见性:隐藏使元素不可见，但不从页面布局中删除它。它在元素所在的地方留下一个空框。display: none从布局中删除它，这样它就不会占用页面上的任何空间，这通常是人们隐藏东西时想要的。
#3
10
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.
可见性:隐藏使元素不可见，因为它仍然在页面上使用空间。显示:none使元素没有空间并完全消失，而元素仍然存在于DOM中。
#4
6
Visibility just makes the element invisible, but it would still take up space on the screen.
可见性只是使元素不可见，但它仍然会占用屏幕上的空间。
#5
1
Visibility:hidden just make the element invisible but it is loaded in DOM so it consumes load time. But Display:none does not load the element.
可见性:隐藏只是使元素不可见，但它是在DOM中加载的，所以它消耗了加载时间。但是Display:none不加载元素。
#1
65
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.
因为在显示中:none，这个元素，无论出于什么目的，都不再存在——它不占据任何空间。但是，在可视性:hidden中，就好像您刚刚添加了不透明度:0到元素中——它占用了相同的空间，但只是操作不可见。
The jQuery creators probably thought the former would be a better fit for .hide().
jQuery创建者可能认为前者更适合.hide()。
#2
18
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.
可见性:隐藏使元素不可见，但不从页面布局中删除它。它在元素所在的地方留下一个空框。display: none从布局中删除它，这样它就不会占用页面上的任何空间，这通常是人们隐藏东西时想要的。
#3
10
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.
可见性:隐藏使元素不可见，因为它仍然在页面上使用空间。显示:none使元素没有空间并完全消失，而元素仍然存在于DOM中。
#4
6
Visibility just makes the element invisible, but it would still take up space on the screen.
可见性只是使元素不可见，但它仍然会占用屏幕上的空间。
#5
1
Visibility:hidden just make the element invisible but it is loaded in DOM so it consumes load time. But Display:none does not load the element.
可见性:隐藏只是使元素不可见，但它是在DOM中加载的，所以它消耗了加载时间。但是Display:none不加载元素。