Wie vermeidet man, dass JQuery toggle() auf einem Layout-Element das Layout bewegt?

Ich habe eine JQuery-Funktion, die eine der divs in meinem Layout schaltet. Das Problem ist, dass sich das gesamte Layout auf dem Bildschirm bewegt, wenn das div erscheint oder verschwindet. Gibt es eine Möglichkeit, den gleichen Ein-/Ausblendeffekt zu erzielen, ohne das Layout zu verändern?Wie vermeidet man, dass JQuery toggle() auf einem Layout-Element das Layout bewegt?

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

Quelle

2009-07-07 ipso facto

Sie könnten, dass die div in einem anderen div wickeln, die die richtige Breite/Höhe des Layouts konsistent zu halten pflegt.

<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. Holen Sie sich einfach die Werte .width() und .height() des reduzierbaren div und wenden Sie sie auf die CSS des äußeren div an.

Quelle

2009-07-07 18:32:01 Sampson

Ich benutze das selbst, aber es ist nicht zu semantisch-freundlich .. – montrealist

@dalbaeb - was meinst du mit 'semantisch-freundlich'? Ich meine, ich weiß was es bedeutet, aber in diesem Zusammenhang? – karim79

Hat den Job gemacht. Vielen Dank. –

Versuchen Sie, eine neue Funktion zu schreiben, die die Sichtbarkeit verwendet: versteckt statt angezeigt: keine. Dadurch bleibt die CSS-Box (und das Layout) erhalten, ohne das div anzuzeigen.

Quelle

2009-07-07 18:33:56

Ich dachte zuerst das Gleiche. Aber was, wenn er das div Animate nahe/offen sehen möchte - das würde einige Probleme verursachen. – Sampson

Die Antwort von Jonathan Sampson wird funktionieren - alternativ ohne zu wissen, was genau Sie tun (das Markup und den gewünschten Effekt) würde ich eine absolute Positionierung mit einem hohen Z-Index verwenden, die den Dokumentenfluss überflüssig macht. Dies ist, was modale Fenster/Leuchtkästen normalerweise verwenden. Hier ist ein tutorial.

Quelle

2009-07-07 18:43:45 FlemishBeeCycle

Wie vermeidet man, dass JQuery toggle() auf einem Layout-Element das Layout bewegt?

Antwort

Verwandte Themen