Come si fa a evitare JQuery ginocchiera () su un div layout dal causare il layout di muoversi?

Question

Ho una funzione JQuery che attiva uno dei div nel mio layout. Il problema è che l'intero layout si sposta sullo schermo quando appare il div o scompare. C'è un modo per ottenere lo stesso mostra / nascondi effetto senza alterare il layout?

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

Answer 1

Si potrebbe avvolgere che in un altro div div che mantiene il giusto larghezza / altezza per mantenere il layout coerente.

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

Se non si conosce l'altezza / larghezza di prima mano, è possibile impostare a livello di codice con JavaScript quando la pagina viene caricata. Basta avere il .width () e .height () valori del div pieghevole e applicarli al css del div esterno.

Answer 2

Provare a scrivere una nuova funzione che utilizza la visibilità: nascosto invece di display: none. Che manterrà la casella CSS (e il layout) senza mostrare il div.

Answer 3

La risposta di Jonathan Sampson funzionerà - in alternativa, senza sapere che cosa esattamente si sta facendo (il markup, e l'effetto desiderato) vorrei utilizzare il posizionamento assoluto con un alto z-index, che si terrà fuori di flusso di documenti. Questo è ciò che le finestre modali / lightbox generalmente usano. Ecco un esercitazione .