How to jQuery slidedown once page has already been loaded

问题

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!

回答1:

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.

回答2:

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.

回答3:

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

来源：https://stackoverflow.com/questions/2647137/how-to-jquery-slidedown-once-page-has-already-been-loaded