Fade in & out content with jquery address (ajax)

Question

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!

Answer 1

It sounds like this fiddle is what you are looking for. I use jQuery.ajax()

$('#b').click(function(){
    $.ajax({

      //i had to create another test fiddle to overcome the 'same origin' issues
      url: 'http://fiddle.jshell.net/K6YPD/show/',
      success: function(data) {             

          //we have the data now
          $('#content').fadeOut(1500, function() {
            //this is a callback once the element has finished hiding

              //populate the div with whatever was returned from the ajax call
              $('#content').html(stripHTML(data));
              //fade in with new content
              $("#content").fadeIn(1500);
          });
      }
    });
});