jQuery fade out before fade in

Question

I am making my portfolio, totally javascript based. http://portfolio.theadamgaskins.com/Portfolio/

My problem, is when you click one of the navigation buttons, the new page fades in at the same time that the other page fades out. The current page should fade out before the new page fades in. Here's the code I'm using:

    $("#homeButton").click(function()
    {
        $('.page[id!="homePage"]').fadeOut('400', function()
        {
            $("#homePage").fadeIn('400');
        });
    });

This is out of context; feel free to View Source on the site.

Answer 1

This happens because some of the elements are already hidden, so their callbacks execute immediately...causing your simultaneous animation. To remedy this add :visible to your selector of elements you want to animate, like this:

$("#homeButton").click(function() {
    $('.page[id!="homePage"]:visible').fadeOut('400', function() {
        $("#homePage").fadeIn('400');
    });
});

This way you're not attaching an animation or problematic callback to the elements that are already hidden.