$j(document).ready(function() {
$j('#nav li a').click(function(){
var toLoad = $j(this).attr('href')+'#content';
$j('#content').fadeOut('400',loadContent);
$j('#load').remove();
$j('#wrapper').append('<span id="load">LOADING...</span>');
$j('#load').fadeIn('normal');
function loadContent() {
$j('#content').load(toLoad,'',showNewContent());
}
function showNewContent() {
$j('#content').fadeIn('400',hideLoader());
}
function hideLoader() {
$j('#load').fadeOut('normal');
}
return false;
});
});
I have also included the following in my header to remove $ conflicts:
<script type="text/javascript">var $j = jQuery.noConflict();</script>