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

Hi,

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?

Code:

jQuery(document).ready(function() {

    /* How to Handle Hashtags */
    jQuery(window).hashchange(function(){
        var hash = location.hash;
        jQuery('a[href='+hash+']').trigger('click');
    });

    /* 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.