page transitions with jquery

Question

Hello, I'd to create some transitions between pages. I've made it this way:

    $("div.fading").css('display', 'none');
    $("div.fading").fadeIn(500);
    $("a.fade").click(function(event){  
         event.preventDefault();
         link = event.href;
         $("div.fading").fadeOut(500, redirect(link));
     }); 

in redirect have I used window.location and it has been working, but the fadeIn effect has been running for every page which has been loaded. I didn't like that, so I'm trying make it with ajax. It should allow me to call the fadeIn function as a callback function in jquery. I have this code,

$(".fading").click(function(event){
    event.preventDefault();
    var link = this.href;
    $(".fade").fadeOut(300, function(){
        $.ajax({
            url: link,
            success: function(){
                $(".fade").fadeIn(300);
            }
        });
    });

which is not fully working..All effects are OK, but page which I get after fadeIn is simply the same that faded out..IMHO can I do it another way with .load() function, I tried to implement that, but there were too some problems:-)Does anybody know what I should do to make it fully working?Thanks..

Answer 1

You're calling the page via ajax, but you're not replacing the contents of the current .fade div before you call fadeIn(). I've modified your code to do that below. .load() should do the same thing a little cleaner.

$(".fading").click(function(event){
    event.preventDefault();
    var link = this.href;
    $(".fade").fadeOut(300, function(){
        $.ajax({
            url: link,
            success: function(pageHTML){
                 $(".fade").html(pageHTML);
                $(".fade").fadeIn(300);
            }
        });
    });

Answer 2

I think you're just missing any used of the data returned. In the success function you'll need to do something like:

$('.fade').html(data);

Then and you can fade it back in with the page having been updated.