Como evitar JQuery alternância () em um div disposição de causar o seu layout para se movimentar?

Question

Eu tenho uma função JQuery que alterna uma das divs no meu layout. O problema é que todo o layout se move em torno da tela quando o div aparece ou desaparece. Existe uma maneira de conseguir o mesmo show / hide efeito sem alterar o layout?

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

Answer 1

Você poderia envolver que div em outra div que mantém o bom largura / altura para manter o layout consistente.

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

Se você não sabe a altura / largura antes da mão, você pode configurá-lo por meio de programação com JavaScript quando a página é carregada. Basta chegar a .width () e .height () valores da div dobrável e aplicá-las para o css da div externa.

Answer 2

Tente escrever uma nova função que utiliza visibility: hidden em vez de display: none. Isso irá manter a caixa CSS (eo layout) sem mostrar a div.

Answer 3

A resposta de Jonathan Sampson vai funcionar - em alternativa, sem saber exatamente o que você está fazendo (a marcação, eo efeito obrigatório) Gostaria de usar o posicionamento absoluto com um alto índice z, que vai tirá-lo do fluxo de documentos. Isto é o que janelas modais / lightboxes geralmente usam. Aqui está um tutorial .