jQuery fadeOut not working on anchor link

Question

I'm trying to have my webpage fade out when clicking on an anchor link, but it's not working. If I press back however, it'll go back to my webpage, but fade out.

$(function(){
    $('a.navlink').click(function(e){
        e.preventDefault();
        linkLocation = $(this).attr('href');
        $('#main-content').fadeOut(1500, redirectPage(linkLocation));  
    });
});

function redirectPage(link) {
    document.location.href=link;
}

Answer 1

The problem is that you are passing the result of a function, not a function.

I.e. do this instead

$(function(){
    $('a.navlink').click(function(e){
        e.preventDefault();
        var linkLocation = $(this).attr('href');
        $('#main-content').fadeOut(1500, function(){
            document.location.href = linkLocation;
        });  
    });
});

A good explanation of jQuery callbacks:

http://learn.jquery.com/about-jquery/how-jquery-works/#callbacks-and-functions