淡入和淡出不起作用

Question

我在搞乱一个单页网站。我希望 div 在导航中的点击事件上淡入淡出。 .currentPage 将在加载时显示，并在单击其他导航时淡出。我把它放在jsFiddle 上。

问题：

1. 没有发生淡出

2. 只有在您点击几次导航后才会出现淡入。

3. 理想情况下，如果您单击 .current 的任何 nav a ，什么都不会发生 - 现在，如果您单击，它会再次运行脚本。

愿望清单：

1. 是否有更简洁的 jQuery 方法用于通过导航淡入和淡出 div？我只是在摸索，没有太多线索......

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

您应该在完成回调中删除当前类

$('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);
    })
});

演示：Fiddle