Can I combine the .load function with fadeIn in jQuery?

Question

I am using the .load function to load in another page using jQuery.

Here is my code:

$('#page1').click(function(){                           
  $("#content").load("page1.html");
});

It's working great, but I would like to fade in the new page. Is there anyway I can combine the load and fadeIn function? I attempted it, but it's not working.

Here is my attempt:

$('#page1').click(function(){                           
  $("#content").load("page1.html").fadeIn("normal");
});

How can I combine the .load and .fadeIn function?

Answer 1

The call to load will use AJAX and will be run asynchronously. You'll want to fade in right after the call is terminated. You can achieve that by passing a callback to load. Your code will look like this:

$('#content').load("page1.html", {}, function() { $(this).fadeIn("normal"); }));

See documentation on jQuery's .load() for more information.

Answer 2

Hide #content before the load, and fade in the entire div when load is complete. I'd guess load acceps a callback function...?

$('#content').hide();
$('#content').load('page1.html', function() { $('#content').fadeIn('normal'); });

EDIT do what miguel said, anyway =)