Fast clicks on nav menu causing fadeIn of multiple divs

Question

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 );
      });
     });

Here is the styles for the divs and buttons:

#container{
    width: 996px;
    height: 1050px;
    background-image: url(images/bg.png);
    background-repeat: no-repeat;
    position: relative;
    background-position: center top;
    margin: 0px auto 0px auto;
}
#navbar {
    width: 150px;
    height: 300px;
    position: absolute;
    top: 250px;
    left: 100px;
    z-index: 2;
    visibility: visible;
}
#about {
    height: 400px;
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    text-align: left;
    padding: 0px 0px 0px 30px;
    width: 650px;
    z-index: 3;
    left: 250px;
    top: 250px;
    display:none;
    overflow: auto;
}
#footer {
    top: 950px;
    height: 80px;
    position: absolute;
    color: #ffffff;
    padding: 10px;
    width: 988px;
    text-align: right;
}

#contact {
    height: 400px;
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    text-align: left;
    padding: 0px 0px 0px 30px;
    width: 650px;
    z-index: 3;
    left: 250px;
    top: 250px;
    display:none;
}
#friends {
    height: 400px;
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    text-align: left;
    padding: 0px 0px 0px 30px;
    width: 650px;
    z-index: 3;
    left: 250px;
    top: 250px;
    display:none
}
#gallery {
    height: 400px;
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    text-align: left;
    padding: 0px 0px 0px 30px;
    width: 650px;
    z-index: 3;
    left: 250px;
    top: 250px;
    display:none;
}
#home {
    height: 400px;
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    text-align: left;
    padding: 0px 0px 0px 30px;
    width: 650px;
    z-index: 3;
    left: 250px;
    top: 250px;
    display:block;
    overflow: auto;
    padding-right: 10px;
}
#home-button {
    opacity: 1.0;
}
#about-button {
    opacity: 0.5;
}
#contact-button {
    opacity: 0.5;
}
#friends-button {
    opacity: 0.5;
}
#gallery-button {
    opacity: 0.5;
}
.button{
    cursor: pointer;
}
#header{
    top: 150px;
    position: absolute;
    left: 115px;
    visibility: visible;
    height: 100px;

The HTML markup should be correct, there are no child divs inside any of the content areas, and I have no other conflicts that I can find.

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.

Thanks!

Answer 1

Without seeing the full picture, I can see a syntax error for the selector in the following line:

if($clicked.css("opacity") != "1" && $clicked.is(":not(animated)"))

The selector for "not animated" should be include the ":" as follows:

if($clicked.css("opacity") != "1" && $clicked.is(":not(:animated)"))

Answer 2

It sounds like the first act of your click function should be to unbind the click event from all the divs, and its last act should be to reinstate the listener.

The way to do this is to put most of your code into its own function (which you put outside the $(document).ready(){} )

Something like this

$(document).ready(function(){
   $("#container div.button").click(makeVisible);

});

function makeVisible() {
    $("#container div.button").unbind(click);
      ///your code to make the div visible
    $("#container div.button").click(makeVisible);
}

Answer 3

Since animations get queued, the best approach would be to use the stop() method to cause all other animated divs other than the currently targeted one to stop animating. See the documentation at http://docs.jquery.com/Effects/stop#clearQueuegotoEnd for more info.