你如何避免JQuery的切换（）上的布局DIV从造成你的布局走动？

Question

我有一个JQuery的功能切换在我的布局的div之一。问题是，整个布局时，DIV出现或消失四处移动在屏幕上。有没有一种方法来达到同样的显示/隐藏效果，而不会改变布局？

<script>
  $(document).ready(function(){
    $("button").click(function () {
      $("#layoutDiv").toggle();
    });
  });
</script>

Answer 1

您可以包装该专区以保持适当的宽度/高度保持一致的布局DIV另一

<div style="width:300px;height:200px">
  <div class="animateMe">
    <p>When I close, the outer div will still be there.</p>
  </div>
</div>

如果你不知道前手的高度/宽度，你可以以编程方式使用JavaScript加载页面时设置。刚刚得到的.WIDTH（）和.height（）可收缩的div的值，并且将它们应用到外div的CSS。

Answer 2

尝试编写使用能见度新的功能：隐藏，而不是显示：无。这将保持CSS盒（和布局），而不显示在div。

Answer 3

乔纳森·桑普森的答案将工作 - 或者不知道究竟你在做什么（标记，以及所要求的效果）我会使用绝对定位高的z-index，这将拿出来公文流转。这是模态窗口/灯箱一般使用。这里的一个教程。