jQuery隐藏元素，同时保留页面布局的空间

有没有一种方法可以隐藏一个元素，但不能改变它隐藏的DOM的jQuery？ 我隐藏了某个元素，但隐藏时，它下面的元素向上移动。 我不希望这样的事情发生。 我想要空间保持不变，但要显示/隐藏的要素。

我可以这样做吗？

Answer 1

而不是hide() ，使用：

 css('visibility','hidden') 

hide()将display样式设置为none ，从而将文档stream中的元素完全删除并使其不占用空间。

visibility:hidden保持原样。

Answer 2

尝试设置hidden的visibility ：

 $("#id").css("visibility", "hidden"); 

Answer 3

display: none; 将把它从内容stream中拿出来，这样你会看到你的其他内容进入留下的空白空间。 （ display: block;将其带回推动一切的stream程）。

visibility: hidden; 将保持在占用空间的内容stream中，而只是使其不可见。 （ visibility: visible;将再次显示。）

如果您希望内容stream保持不变，则需要使用visibility 。

Answer 4

在另一个答案中指出，jQuery的fadeTo没有设置display:none ，所以也可以在这里提供一个解决scheme，而不是使用fadeOut例如：

jQuery，隐藏一个div而不会干扰页面的其余部分

Answer 5

我使用opacity:0之前，我看到这个visibility:hidden技巧。

我不知道有什么好处，实际上渲染速度可能会比较慢。 但无论如何这是一个替代scheme。

一个显着的区别是，你不能交互（如焦点或点击）具有visibility:hidden的元素visibility:hidden但用户可以与具有opacity:0的元素进行交互 opacity:0 。 这可能是一个隐藏元素的缺点。 （由DeadPassive指出）