hide a div before animation with jquery

[?foru]

The code below animates divs site1 and site2 to the left and I need to "hide" div 3 until it's animation is ready then center it in the page by using
$('.site3').animate({left: $(".site3").width() / 2}, 1000);


$(".site1").click(function(){
$(".site1").animate({'left': "-=2550"}, 1000, 'swing');
$(".site2").animate({'left': "-=2550"}, 1000, 'swing');
//div 3 will be hidden until it swings in from the left
$('.site3').animate({left: $(".site3").width() / 2}, 1000);
// redirect to external site after site3 animates in and shows a graphic
$(".site1").after( "<meta http-equiv=\"refresh\" content=\"2;url=http://www.example.com\">" );
});

Any help is appreciated, thank you.

[jscheuer1]

I don,t think you really want to "hide" it. If it were me, I would simply position it off screen, that way when you animate it onto the screen, it would appear to slide into place.

[?foru]

You're right, I thought about it after I said that and it didn't sound right. :D I set a negative margin of -2500px on .site3 and am testing with this fiddle, but I can't quite get it to align right...

http://jsfiddle.net/f2X2e/12/

Site 1 and Site 2 are equal and centered in the middle of the page (basically links on a "splash" page). Site 3 should be off to the left out of the viewing area, then the jQuery animates it in to the center position.


$('.site3').animate({left: $(".site3").width() / 2 + 2500}, 1000); I added the +2500 to compensate for the negative css styling.

[jscheuer1]

I wouldn't use margin. Since what you're animating is its left property (which assumes it's positioned relative, absolute, or fixed), I would initially 'hide' it (position it off screen) in the stylesheet or via inline style using its left property.

[?foru]

I styled .site3 with "relative" position like the other divs and positioned it "off the screen" using margin-left with a negative value. I think the issue might be with floats. The linked JSFiddle above isn't updated, but do you think you might be able to check it out?