Fade out, then direct to a new page

Question

I have the follow code: The wrapper fades out, then takes the user to the URL. However, it only seems to fadeOut once. I assume this is because my browser has already cached/loaded the page, and is therefore quicker than to load.

Is it possible to make sure the window.location isn't called until the fadeOut has completed? My current code:

$('a').click(function (e) {
    e.preventDefault();
    $('.wrapper').fadeOut(1000);
      window.location = this.href;

});

And I've tried a callback, but I assume the this.href has changed?

    $('a').click(function (e) {
        e.preventDefault();
        $('.wrapper').fadeOut(1000, function(){
                    window.location = this.href;
        });
    });

Any help would be appreciated.

http://jsfiddle.net/tmyie/em2Km/1/

Answer 1

The this inside window.location = this.href; is no longer the anchor tag that was clicked but the function that was attached as the event handler.

try:

$('a').click(function (e) {
  e.preventDefault();
  var href = this.href
  $('.wrapper').fadeOut(1000, function(){
    window.location = href;
  });
});