fadeIn and fadeOut not working

Question

I'm messing around with a one page site. I'm looking to have divs fade in and out on click events in the nav. The .currentPage will be showing on load, and fade out when other nav a's are clicked. I have it up on jsFiddle.

Issues:

1. fadeOut doesn't happen

2. fadeIn only happens after you've clicked nav a's a couple of times.

3. Ideally, I'd like it so that if you click whichever nav a is .current, nothing happens - Right now if you click, it runs the script again.

Wishlist:

1. is there a more succinct jQuery method for fading divs in and out via the nav? I'm just kind of fumbling around and don't have much clue...

HTML

<nav>
    <a href="#" id="workPage" class="current">Work</a>
    <a href="#" id="aboutPage">About</a>
    <a href="#" id="designPage">Design</a>
</nav>

<div class="box work currentPage">WORK</div>
<div class="box about">ABOUT</div>
<div class="box design">DESIGN</div>

jQuery

$('nav a').click(function () {
    if (!$(this).hasClass("current")) {
        $('.current').removeClass("current");
        $(this).addClass("current");
    }

}); //using this to set a "current" state in the nav


$("#workPage").click(function () {
    $('.currentPage').fadeOut(500, function (){
        $('.work').addClass('currentPage').fadeIn(500);
        }).removeClass('currentPage');
    });


$("#aboutPage").click(function () {
    $('.currentPage').fadeOut(500, function (){
        $('.about').addClass('currentPage').fadeIn(500);
    }).removeClass('currentPage');
});

$("#designPage").click(function () {
    $('.currentPage').fadeOut(500, function (){
        $('.design').addClass('currentPage').fadeIn(500);
    }).removeClass('currentPage');
});

Answer 1

You should remove the current class in the complete callback

$('nav a').click(function (e) {
    if (!$(this).hasClass("current")) {
        $('.current').removeClass("current");
        $(this).addClass("current");
    } else {
        e.stopImmediatePropagation();
    }

});


$("#workPage").click(function () {
    $('.currentPage').fadeOut(500, function (){
        $(this).removeClass('currentPage')
        $('.work').addClass('currentPage').fadeIn(1000);
    });
});


$("#aboutPage").click(function () {
    $('.currentPage').fadeOut(500, function (){
        $(this).removeClass('currentPage')
        $('.about').addClass('currentPage').fadeIn(1000);
    })
});

$("#designPage").click(function () {
    $('.currentPage').fadeOut(500, function (){
        $(this).removeClass('currentPage')
        $('.design').addClass('currentPage').fadeIn(1000);
    })
});

Demo: Fiddle