CODEWITHSUNDEEP
jquerycsshide
sscirrus
sscirrus

Reputation: 56709

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 visible:none). How can I hide #box1 so it doesn't disrupt other floated elements that depend on its presence?

Upvotes: 2

Views: 1030

Answers (4)

Mikeys4u
Mikeys4u

Reputation: 1552

This code works without losing position and does not collapse.

(hide)

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

(show)

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

Upvotes: 0

CraigKerstiens
CraigKerstiens

Reputation: 5954

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);

Upvotes: -1

Andy
Andy

Reputation: 30135

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);

Upvotes: 2

Hussein
Hussein

Reputation: 42808

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{
..
}

Upvotes: 1

Related Questions