Question

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

的问题：

fadeOut不会发生
fadeIn只在您点击几次导航后才会发生。
理想情况下，我希望如果您点击任何导航a。当前，没有任何反应 - 现在如果您点击，它会再次运行脚本。

收藏：

是否有一种更简洁的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

fadeIn和fadeOut不工作

1 个答案: