jquery slidedown on page load

Question

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.

Solution 1

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

Solution 2

$('#hidden_div_id').slideDown('slow');

this internally make use of display:block