How to slide an entire page on load with jquery

Question

I'd like to slide my entire page down when it's changed. I'm thinking the way to do this will be to create a vertical slide that plays when a link is clicked and again when the page loads? So far, I've only been able to create a slide that affects a particular DIV. I'd also like it to slide in vertically. Any ideas will be greatly appreciated!

Solution

Just wrap all your content inside a div and slide that down.

CSS

#bodyContent {
   display:none;
   height: 100%;
}

HTML

<div id="bodyContent">
    //all your stuff goes in here
</div>

Javascript/JQuery

$(document).ready(function(){
   $('#bodyContent').slideDown();
});

Comments

[Bridget Kilgallon]

perfect! I'm thinking I'd like to also cause the page to slide up when the link to a new page is clicked. Here's what I've got for that: $("a.switchpage").click(function(e) { e.preventDefault(); linkLocation = this.href; $("#container").slideUp(1000, redirectPage); however that's causing the page to stop loading entirely. I might be putting it in the wrong spot within the code. I'm pretty new to this.

[Mohd Abdul Mujib]

@BridgetKilgallon Its the preventDefault() part, that is "causing the page to stop loading", well if you wanted to just resume, just add "return true" before the closing brace of the function.