Using jQuery.load () with .hide () and .show () at page start

Question

I use the following code to show the div when the page starts:

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

This will cause a div to appear with slow animation when the page starts up (loading / updating the page)

However, if at the start of the page (loading / updating the page) I want to insert HTML from another file into this div before starting this animation, I try to do this:

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

When I do this, the animation no longer works at startup (page load / refresh). How to load html from another file and still work with animation when the page starts (loading / updating the page)?

Answer 1

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

in your css add

 #mydiv { display: none; } 

Answer 2

Better use CSS to initially hide your div

 #mydiv { display: none } 

and then you can show it

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

Answer 3

Add part of the show as a load callback:

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

Answer 4

I recommend hiding the page, loading the content, and then showing the div. You can simply use the second argument ( complete ) .load(url[, data][, complete]) :

 $('#myDiv').load('...', function() { // gets executed when the content is loaded $(this).show('slow'); }); 

Answer 5

I understood the way.

You do something like this with ajax:

 $.ajax({ url: "myPage.html", cache: false }).done(function (html) { $("#myDiv").append(html); $("#myDiv").hide().show("slow"); }); 

This ensures that the page is called before the animation starts!