jQuery Forum

I'm having an issue with a script (my first try at jQuery) I wrote to fade in divs using a nav menu. If a user clicks different buttons on the nav menu quickly, it loads both divs over top of each other.

Here is the code:

$(document).ready(function(){
      
         $("#about-button").css({
            opacity: 0.3
         });
         $("#contact-button").css({
            opacity: 0.3
         });
         $("#friends-button").css({
            opacity: 0.3
         });
         $("#gallery-button").css({
            opacity: 0.3
         });
      $("#container div.button").click(function(){
            $clicked = $(this);
            if($clicked.css("opacity") != "1" && $clicked.is(":not(animated)"))
            {
               $clicked.animate({
                  opacity: 1,
               }, 600 );
               var idToLoad = $clicked.attr("id").split('-');
               $("#content").find("div:visible").fadeOut("slow", function(){
                  $(this).parent().find("#"+idToLoad[0]).fadeIn("slow")
               })
            }
            $clicked.siblings(".button").animate({
               opacity: 0.3,
            }, 600 );
         });
      });   

Is there a way I can disable clicks on the menu until the div is :visible? If someone has an answer for that or another fix, i'd really like to see it! this is the only bug that has been found so far with the site.

Here is the site in question:http://www.drifterproductions.ca
Here is the style sheet:http://www.drifterproductions.ca/styles.css

Thanks!