0

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

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

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

任何和所有的帮助表示赞赏，谢谢。

4

1 回答 1

0

看起来您拥有的大多数 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">

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

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

于 2013-11-04T23:02:15.250 回答