jquery slidedown on page load

jquery css slide slidedown
Aol Shqip picture Aol Shqip · Jan 2, 2012 · Viewed 21k times · Source

How can slide down a div with jquery on page load where css is set to display:none? I see a lot of solutions but none can slide div if css is set display:none. The best way is to hide it on load and after slidedown but the div have flash (show) when page is loading.

Answer

john picture john · Jan 2, 2012

You could try this:

$(document).ready(function(){
    $('.hidden').slideDown(1000);
});

HTML:

<div class="hidden">This is the content</div>

CSS:

.hidden{
 display:none;   
}

It slides down on page load.

DEMO

Related questions

How to slide a hidden div up/down on click of a button?

I want to achieve this type of a slide down except instead of on hover I think I need some sort of script that triggers the slide down on click and then click again to trigger the reverse slide up. …

Read More
jquery slide div within a div

I have a container div element, this should contain all child div elements. I saw this thread: Slide a div offscreen using jQuery and I was wondering how to implement it (within a div element and not in the body). …

Read More
How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More