jQuery fade div problem

jQuery fade div problem

I am trying to create my portfolio and have come to a slight problem. When I change pages, the text from the previous page does not fade out before the clicked page loads, so the text flickers. You can see what I mean by going to my website.

I am very new to jQuery and want to learn, I have tried playing around with the code to no avail. There is probably an extremely easy fix, but I am unable to find it. Any help would be greatly appreciated. The website and code are as follows:

Website: www.adam-cooper.net/test
Code:
$(function(){
      
         $("#about-button").css({
            opacity: 0.2
         });
         $("#contact-button").css({
            opacity: 0.2
         });
      
         $("#page-wrap div.button").click(function(){
            
            $clicked = $(this);
            
            // if the button is not already "transformed" AND is not animated
            if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
               
               $clicked.animate({
                  opacity: 1,
                  borderWidth: 5
               }, 600 );
               
               // each button div MUST have a "xx-button" and the target div must have an id "xx"
               var idToLoad = $clicked.attr("id").split('-');
                                     
               $('#content > div').fadeOut('fast'); // Fade out just the containing divs.
               $('div#' + idToLoad[0]).fadeIn();
            }
                        
            //we reset the other buttons to default style
            $clicked.siblings(".button").animate({
               opacity: 0.2,
               borderWidth: 1
            }, 600 );
            
         });
      });