Question

I have a question about Jquery fadein. I am trying to use it on a div, but it does not work, even not when hiding it first.

I am using this code which fills the DIV when loading the page:

$('#pagebody').html('<p><img src="/common/images/loader.gif" width="24" height="24" /></p>');
$('#pagebody').load("useradmin.php").hide().fadeIn('slow');

First it loads a little preloader image, then it loads the contents of the div, which i want to fade in. Why doesn’t this work?

Answer 1

$.load() is asynchronous – in this case it means that .hide().fadeIn() will be executed before the load is complete. Put the fadeIn to a callback function that will execute after the content has loaded:

$('#pagebody').load("useradmin.php", function() {
    $( this ).hide().fadeIn('slow');
});

​