javascript - 当用户单击菜单中的元素时，jQuery 不会消失？

Question

当用户点击主菜单时，我已经设法让我的网页淡出到设置页面，但是当用户点击他/她刚刚进入的页面上的菜单中的元素时，它不会淡出回用户想要访问的页面？

有很多代码，所以这里有一个指向该站点的链接:http://www.penguinie.co.uk这是一个 JSFiddle，但它可能无法传达它的工作方式

http://jsfiddle.net/NxAzu/

There is a main.css file, a fade.js file and the index.html file. I also use animate.css.

我在这里问了一个关于如何使链接真正起作用的类似问题:https://stackoverflow.com/questions/19776289/jquery-fade-in-and-out-isnt-working

感谢所有帮助，谢谢。

Answer 1

看起来您拥有的大多数 jQuery + 动画 CSS 对于您尝试做的事情来说并不是真正必需的(如果我正确地理解了这个概念的话)。

删除 jQuery 代码以及您当前拥有的 animate.css 并尝试将其插入:

$('a[href^="#"]').on('click', function(){

    // Cache
    var _this = $(this);

    // Get the section name that you want to show
    var section_to_show = $(_this.prop('hash'));

    // Hide all other sections except the one you want to show
    // but make sure it's not currently being animated
    _this.closest('section').not(':animated').animate({
        'margin-top': '-100px', 
        opacity: 0
    }, 750, function() {

        // Hide the current element so it can be
        // faded in next time it's called
        $(this).hide();

        // Fade in the section that you wanted 
        section_to_show.css({ 
            opacity: 1,
            'margin-top': '0'
        }).fadeIn(750);

    });

});

因为您的所有部分都与每个链接中的散列名称相同，所以您可以从您单击的链接中调用散列值，淡出当前部分(带有一点向上滑动 + 淡出动画)然后每次点击淡入新内容。

最后，从 #start 部分删除 .animated .fadeInDown 类，因为它似乎会取消动画:

<section id="start" class="start">

附言您可能希望将导航移动到所有花哨的部分动画之外的它自己的容器中，以避免在每个部分上为相同的菜单创建标记。只是一个建议。

这是一个 fiddle 示例:http://jsfiddle.net/aPPYT/3/