当用户单击菜单中的项目时，jQuery不会消失吗？

Question

I have managed to make my webpage fade to a set page when a user clicks on the main menu but when the user clicks on an item in the menu on the page s/he has just entered it will not fade back into the page the user wants to access?

There is a lot of code so here's a link to the site: http://www.penguinie.co.uk here's a JSFiddle but it may not convey the way iw ant it to work

http://jsfiddle.net/NxAzu/

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

I asked a similar question here about how to make the links actually work: https://stackoverflow.com/questions/19776289/jquery-fade-in-and-out-isnt-working

Any and all help appreciated, thanks.

Answer 1

It looks like most of the jQuery + animation CSS that you have isn't really necessary for what you're trying to do ( if I'm correctly grasping the concept ).

Remove the jQuery code as well as the animate.css that you currently have and try plugging this in:

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

    });

});

Since you have all of your sections named the same as the hash in each link, you can just call the hash value from the link that you clicked on, fade out the current section (with a little slide up + fadeout animation ) and then fade in the new for each click.

Finally, remove the .animated .fadeInDown classes from the #start section as it seems to throw off the animation:

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

PS You may want to move the navigation into it's own container outside of all of the fancy section animations to avoid creating markup for the same menu on every section. Just a suggestion.

Here's a fiddle example: http://jsfiddle.net/aPPYT/3/