Using JQuery .load() with .hide() and .show() on page startup

Question

I'm using the following code to show a div on page startup:

$("#mydiv").hide().show("slow");

This will make the div appear with a slow animation on page startup (page load / refresh)

However, if, on page startup (page load / refresh), I want to insert HTML from another file into this div before this animation starts I try to do this:

$("#mydiv").load("myPage.html");
$("#mydiv").hide().show("slow");

When I do this, the animation no longer works on startup (page load / refresh). How can I load html from another file and still have the animation work on page startup (page load / refresh)?

Answer 1

$(document).ready(function(){  
  $('#mydiv').load('myPage.html', function() {
      $(this).show();
    });
});

in your css add

#mydiv { 
   display: none; 
}

Answer 2

It is better to use CSS for initial hiding of your div

#mydiv { display: none }

and then you can show it

$("#mydiv").load("myPage.html", function() {
    $(this).show(600);
});