Wie Sie JQuery Toggle () auf einem Layout div von verursacht Ihr Layout bewegen vermeiden?

StackOverflow https://stackoverflow.com/questions/1093990

  •  11-09-2019
  •  | 
  •  

Frage

Ich habe eine JQuery-Funktion, die eine der divs in meinem Layout wechselt. Das Problem ist, dass das gesamte Layout auf dem Bildschirm bewegt sich, wenn das div erscheint oder verschwindet. Gibt es eine Möglichkeit den gleichen Show / Hide-Effekt zu erzielen, ohne das Layout zu ändern? 

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

Lösung

Sie könnten, dass die div in einem anderen div wickeln, die die richtige Breite / Höhe das Layout konsistent zu halten pflegen. 

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

Wenn Sie nicht über die Höhe / Breite vor der Hand wissen, können Sie es programmatisch mit Javascript gesetzt, wenn die Seite geladen wird. Nehmen Sie einfach die .width () und .height () Werte des zusammenlegbaren div und sie auf die CSS des äußeren div.

Andere Tipps

Versuchen Sie, eine neue Funktion zu schreiben, die Sichtbarkeit verwendet: Statt Anzeige versteckt: keine. Das wird die CSS-Box (und das Layout) aufrechtzuerhalten, ohne die div zeigt.

Jonathan Sampson Antwort funktionieren wird - alternativ, ohne zu wissen, was genau tun Sie (das Markup, und der gewünschte Effekt) würde ich die absolute Positionierung mit einem hohen Z-Index verwenden, die es aus dem Dokumentenfluss nehmen. Dies ist, was modale Fenster / Leuchtkästen im Allgemeinen verwenden. Hier ist ein Tutorial .

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top