JQuery .hide() with no positioning lost?

I have the following simple script to make an element of my webpage fade in as the page is loaded.

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

The problem I have is that when hidden, #box1 takes up no space (due to its class being visibl开发者_运维知识库e:none). How can I hide #box1 so it doesn't disrupt other floated elements that depend on its presence?

Don't know if that's possible in your case but you could just set the opacity of the element,

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

then

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

Put #box1 in a wrapper and give it a width and height. Now when you hide #box1, wrapper stay empty.

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

#wrapper{
..
}

This code works without losing position and does not collapse.

(hide)

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

(show)

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

JQuery's hidden is the equivalent of setting the display to none. This is the same currently as:

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

Instead try first setting the css class on the object to have a visibility of none. Something like:

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

Then

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