How to jQuery slidedown once page has already been loaded

Question

I am having a timing issue when attempting to slide down my more info div. My desired functionality is that the div slidesdown from the top once the page has already been rendered. My problem is if I use $(document).ready().. the animation does not visibly occur.

Here is my code:

    $(document).ready(function() {
        $(".MoreInfo").slideDown('slow');
    });

If I strap it to some other element's click for example, it works beautifully. But I am not sure how to make it visibly slide down once the page has loaded. Thanks!

Answer 1

You might want to try using

$(window).load(function() 

instead of

$(document).ready(function() 

as some of the elements you are trying to manipulate might not be completely loaded when $(document).ready fires.

Answer 2

Perhaps try body onload instead

$("body").load(function() {
    $(".MoreInfo").slideDown('slow');
});

...document.ready occurs as soon as the DOM can be manipulated, not necessarily once the page is displayed - it could be well before the page is displayed. You could also try putting this on a setTimeout call to allow a little extra time

Answer 3

I tried mixing and matching using:

$(window).load(function()  

and

$(document).ready(function()  

but did not have any luck. I ended up using

 $(document).ready(function() {
    $(".MoreInfo").slideUp(1).delay(2000).slideDown('slow');

and that seemd to work. I think it had to do with the element already being displayed more than anything else.