Question

当用户点击主菜单时，我设法让我的网页淡入到设定的页面，但是当用户点击页面上的菜单中的项目时，他/她刚刚输入它就不会淡入用户想要访问的页面？

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

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);

    });

});

由于您的所有部分的命名与每个链接中的哈希相同，您只需从您单击的链接调用哈希值，淡出当前部分（稍微向上滑动+淡出动画）然后在每次点击时淡入新内容。

最后，从.animated .fadeInDown部分删除#start类，因为它似乎会抛弃动画：

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

P.S。您可能希望将导航移动到所有精美部分动画之外的自己的容器中，以避免为每个部分的相同菜单创建标记。只是一个建议。

这是一个小提琴示例：http://jsfiddle.net/aPPYT/3/

当用户点击菜单中的项目时，jQuery不会淡出？

1 个答案: