JQuery .hide() ohne Positionsverlust?

Question

Ich habe das folgende einfache Skript, um ein Element meiner Webseite einblenden zu lassen, wenn die Seite geladen wird.

$('#box1').hide();
$('#box1').delay(300).fadeIn(500);

Das Problem, das ich habe, ist, dass wenn versteckt, #box1 nimmt keinen Platz ein (da seine Klasse visible:none ist). Wie kann ich ausblenden #box1 damit es nicht andere schwebende Elemente stört, die von seiner Anwesenheit abhängen?

Answer 1

Ich weiß nicht, ob das in Ihrem Fall möglich ist, aber Sie könnten einfach die Deckkraft des Elements einstellen,

$('#box1').css('opacity':0);

dann

$('#box1').delay(300).fadeTo(1,500);

Answer 2

Setzen Sie #box1 in einen Wrapper und geben Sie ihm eine Breite und Höhe. Wenn Sie nun #box1 ausblenden, bleibt der Wrapper leer.

<div id="#wrapper">
  <div id="box1"></div>
</div>

#wrapper{
..
}

Answer 3

Dieser Code funktioniert ohne Positionsverlust und kollabiert nicht.

(ausblenden)

$("#name").animate({opacity:0});

(anzeigen)

$("#name").animate({opacity:1});

Answer 4

JQuery's hidden ist das Äquivalent zur Einstellung der Anzeige auf none. Dies ist derzeit das gleiche wie:

$('#box1').css({"display":"none"});    

Versuchen Sie stattdessen zunächst, die CSS-Klasse des Objekts so einzustellen, dass die Sichtbarkeit auf "none" gesetzt wird. Etwas wie:

$('#box1').css({"visibility":"hidden"});

Dann

$('#box1').delay(300).fadeIn(500);