Clics rapides sur le menu de navigation provoquant le fadeIn de plusieurs divs

Question

J'ai un problème avec un script (mon premier essai chez jQuery) J'ai écrit dans fade in divs en utilisant un menu nav. Si un utilisateur clique rapidement sur différents boutons du menu de nav, il charge les deux divs les uns sur les autres.

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

Voici les styles pour les divs et boutons:

#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; 

Le balisage HTML doit être correct, il n'y a pas divs enfants à l'intérieur de tout contenu domaines, et je n'ai pas d'autres conflits que je peux trouver.

Est-il possible de désactiver les clics sur le menu jusqu'à ce que la div soit: visible? Si quelqu'un a une réponse pour ça ou une autre solution, j'aimerais vraiment le voir! c'est le seul bug qui a été trouvé jusqu'ici avec le site.

Merci!

Answer 1

Sans voir le tableau complet, je peux voir une erreur de syntaxe pour le sélecteur dans la ligne suivante:

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

Le sélecteur pour « non animé » devrait être inclure le « : » comme suit:

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

Answer 2

Il semble que le premier acte de votre fonction de clic devrait être de délier l'événement click de tous les divs, et son dernier acte devrait être de réintégrer l'écouteur.

La façon de le faire est de mettre le plus de votre code dans sa propre fonction (que vous mettez en dehors du $ (document) .ready() {})

Quelque chose comme ça

$(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

Étant donné que les animations sont mises en file d'attente, la meilleure approche consiste à utiliser la méthode stop() pour que toutes les autres divs animées autres que celle actuellement ciblée cessent d'animer. Voir la documentation au http://docs.jquery.com/Effects/stop#clearQueuegotoEnd pour plus d'informations.