如何隐藏一个元素，让它占据它的空间并让它出现在那个位置？答案

【问题标题】：How to keep an element hidden, let it occupy its space and make it appear at that position?如何隐藏一个元素，让它占据它的空间并让它出现在那个位置？
【发布时间】：2014-02-25 01:24:54
【问题描述】：

我在一个网站上学习 jQuery，偶然发现了一个演示 fadeIn() 和 fadeOut() 的示例。如何使“可见性：隐藏”元素出现或“显示：无”元素在隐藏时占用其原始空间？

<script>
  $(document).ready(function(){
  $("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeOut(3000); 
 });
 });
</script>
</head>

<body>
  <p>Demonstrate fadeIn() with different parameters.</p>
  <button>Click to fade in boxes</button>
  <br><br>
  <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
  <br>
  <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
  <br>
  <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>`

【问题讨论】：

您正在寻找可见性。
实际上我尝试了可见性，但与 display:none 不同，当我单击按钮时它并没有真正出现！

标签： jquery html css visibility

【解决方案1】：

你需要使用visibility : visible|hidden

对于淡入淡出效果，您可以更改不透明度 -

.animate({opacity:1}); // 0 to make it invisible and 1 to make it visible.

动画--->http://api.jquery.com/animate/

【讨论】：

【解决方案2】：

使用visibility: hidden开始，当你准备好显示它们时，将css设置为visibility: visible

【讨论】：

【解决方案3】：

您希望visibility:hidden; 隐藏该元素但仍保留它。

http://jsfiddle.net/EbbUh/

【讨论】：

【解决方案4】：

您只需在所有 div 中添加一个parent <div> 即可保持该位置...

检查一下这个小提琴……不知道是不是你想要的……

DEMO

【讨论】：

非常感谢 Bhaskar，这正是我想要得到的！