Question

I have a js script that shows loading image and than loads content into #content div.
It works fine, but I cant figure out how to make it so it fades in content once it is loaded?

function viewHome(){
    $('#woodheader').load("inc/home.php");
    $('#content').html('<span class="loader">Loading..&nbsp;&nbsp;&nbsp;<img class="loaderimg" src="images/ajax_loader.gif"/></span>').load("inc/home.php");
}

For example when .load("inc/home.php"); finishes, I would like to fade in the content of inc/home.php file with duration of 3 seconds. How can I do it?

Answer 1

function viewHome() {
    $('#woodheader').load("inc/home.php");
    var content = $('#content');
    content.html('<span class="loader">Loading..&nbsp;&nbsp;&nbsp;" +
        "<img class="loaderimg" src="images/ajax_loader.gif"/></span>');
    content.load("inc/home.php", function () {
        content.hide().fadeIn(3000);
    });
}