How to slide an entire page on load with jquery

jquery load slide
Bridget Kilgallon picture Bridget Kilgallon · Apr 15, 2012 · Viewed 23.3k times · Source

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!

Answer

Aaron Snyder picture Aaron Snyder · Apr 16, 2012

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

Related questions

How do I load an url in iframe with Jquery

I want to load an iframe on click, this is what I have so far: $("#frame").click(function () { $('this').load("http://www.google.com/"); }); It doesn't work. This is the complete code: JS Bin

Read More
jQuery load first 3 elements, click "load more" to display next 5 elements

I have an unordered list: <ul id="myList"></ul> <div id="loadMore">Load more</div> I wish to populate this list with list items from another HTML file: <li>One&…

Read More
Load content of a div on another page

You will see from this code that it loads the content URL from the hash tag. Is there anyway to load only a single div element from that external page. $(function() { if(location.hash) $("#content_inload").load(location.hash.substring(1)); $("#…

Read More