¿Cómo evitar jQuery de palanca () en un div diseño de la causa de su disposición para moverse?

Question

Tengo una función jQuery que alterna uno de los divs en mi diseño. El problema es que todo el diseño se mueve por la pantalla cuando aparece o desaparece el div. ¿Hay una manera de conseguir el mismo efecto mostrar / ocultar sin alterar el diseño?

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

Answer 1

Se puede concluir que en otro div div que mantiene el buen anchura / altura para mantener el diseño coherente.

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

Si no conoce la altura / anchura de antemano, puede establecer mediante programación con javascript cuando se carga la página. Acaba de obtener el .width () y .height () valores de la div plegable y aplicarlos a la CSS de la div exterior.

Answer 2

Trate de escribir una nueva función que utiliza la visibilidad: oculto en lugar de display: none. Que mantendrá el cuadro de CSS (y el diseño) sin mostrar el div.

Answer 3

La respuesta de Jonathan Sampson trabajará - alternativamente, sin saber exactamente lo que está haciendo (el margen de beneficio, y el efecto requerido) Me usaría posicionamiento absoluto con un alto índice z, que se llevará a cabo de flujo de documentos. Esto es lo que las ventanas modales / Mesas de luz utilizan generalmente. He aquí una tutorial .