jquery.address ajax,Fade in & out content with jquery address (ajax)

How'd I go about making the content already loaded fade out once the new content has loaded, then this new content fade in.

I'm using jquery address to try and achieve this, if its easier/better with another plugin please suggest one :-)

The code I have is as follows:

function loadURL(url) {

console.log("loadURL: " + url);

$("#content").load(url);

}

$.address.init(function(event) {

console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));

}).change(function(event) {

$("#content").load($('[rel=address:' + event.value + ']').attr('href'));

console.log("change");

})

$('a').click(function(){

loadURL($(this).attr('href'));

$("#content").hide();

$("#content").fadeIn();

});

I did try and think that I could maybe create a loader div, that I'd fade in over the top rather than fading out the content, but I really don't know where to go with it.

At the moment the content fade's in, and once you click the other link it changes to the new content, also fading it in, but I don't know how I'd make it fade out, before the new content fades in.

Any help would be greatly appreciated!