1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

[jQuery] How can I hide page elements after the opacity animation?

Discussion in 'HTML & Website Design' started by kent55, Dec 25, 2013.

  1. #1

    I am making a website for myself and the only part I am not confident in is JavaScript. This jQuery code is the navigation and what makes each page fade out then fade in with opacity. Now the issue I am having is that when I add links because the actual content isn't hidden you can still click the links on other pages. So what I am asking is: What edit can be made to this code to keep the opacity animation but hide the content too?


    jQuery(document).ready(function() {
        /* How to Handle Hashtags */
            var hash = location.hash;
        /* Main Navigation Clicks */
        jQuery('.main-nav ul li a').click(function() {
            var link = jQuery(this).attr('href').substr(1);
            if ( !jQuery('section.content.show, section#' + link).is(':animated') ) {
                jQuery('.main-nav ul li a').removeClass('active'); //remove active
                jQuery('section.content.show').addClass('show').animate({'opacity' : 0}, {queue: false, duration: 1000,
                    complete: function() {
                        jQuery('a[href="#'+link+'"]').addClass('active'); // add active
                        jQuery('section#' + link).addClass('show').animate({'opacity' : 1}, {queue: false, duration: 1000});   
    Code (markup):
    Thanks in advance.
    kent55, Dec 25, 2013 IP