How to stop a div becoming visible before it's content is replaced?

Question

I want to replace a div's content and then make it visible

$("#btn").click(function () {
$('#div01').load('about.php');
$("#div01").slideDown("slow");
});

But the div becomes visible before the content is changed, so user can see the previous content - which is not the idea.

Answer 1

The second parameter of the load() function can be used as a callback function. So the slideDown() only occurs when the load is complete:

$("#btn").click(function () {
    $('#div01').load('about.php', function(){
        $("#div01").slideDown("slow");
    });
});

Answer 2

Try this:

$("#btn").click(function () {
    $('#div01').load('about.php',function(){
        setTimeout(function(){$("#div01").slideDown("slow")},100);
    });
});

Answer 3

.load() is an ajax function so try to get it after ajax completes with jQuery.ajaxComplete():

$("#btn").click(function () {
     $('#div01').load('about.php');
});

$.ajaxComplete(function(){
   $("#div01").slideDown("slow");
});