Like jQuery slidedown once the page is already loaded

Question

I have a synchronization problem when trying to shift my extra info div. My desired functionality is that the Div slide show is on top as soon as the page has already been displayed. My problem is that if I use $ (document) .ready (), the animation is not noticeable.

Here is my code:

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

If I attach it to some other element, for example, it works beautifully. But I'm not sure how to make it slide down noticeably as soon as the page loads. Thanks!

Answer 1

I tried mixing and matching using:

 $(window).load(function() 

and

 $(document).ready(function() 

but no luck. I ended up using

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

and it seems to work. I think this is due to the fact that the element is already displayed more than anything else.

Answer 2

You might want to try using

 $(window).load(function() 

instead

 $(document).ready(function() 

as some of the elements you are trying to manipulate may not be fully loaded when $ (document) .ready is run.

Answer 3

Maybe try using body loading

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

... document.ready arises as soon as the DOM can be manipulated, not necessarily as soon as the page is displayed - this may be good before the page is displayed. You can also try putting this on a setTimeout call to allow some extra time.