jQuery .load() with fadeIn effect

Question

I'm trying to load #content of a url via AJAX using jQuery within #primary. It loads but doesn't fadeIn. What am I doing wrong?

$('.menu a').live('click', function(event) {         var link = $(this).attr('href');         $('#content').fadeOut('slow', function(){             $('#primary').load(link+' #content', function(){                 $('#content').fadeIn('slow');             });         });         return false;     }); 

Many thanks for your help.

Answer 1

Actually I was able to do it by applying the effect to the wrapper div instead...

$('#primary').fadeOut('slow', function(){     $('#primary').load(link+' #content', function(){         $('#primary').fadeIn('slow');     }); }); 

Answer 2

Just this:

$('.element').load('file.html',function(){}).hide().fadeIn(); 

Or to add this behaviour as default in the load() function:

$.fn.load_=$.fn.load; $.fn.load=function(){     return $.fn.load_.apply(this,arguments).hide().fadeIn(); }