Schnelle Klicks auf Nav-Menü verursacht FadeIn von mehreren Divs

Question

Ich habe ein Problem mit einem Skript (mein erster Versuch bei jQuery) Ich schrieb, um divs über ein Nav-Menü einblenden. Wenn ein Benutzer schnell auf andere Schaltflächen im Navigationsmenü klickt, werden beide Divs übereinander geladen. Hier

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

Hier ist die Stile für die divs und Tasten:

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

Die HTML-Markup sollte korrekt sein, es gibt keine Kinder divs innerhalb irgendwelche des Inhalts Bereiche, und ich habe keine anderen Konflikte, die ich finden kann.

Gibt es eine Möglichkeit, die Klicks im Menü zu deaktivieren, bis das div ist: sichtbar? Wenn jemand eine Antwort für diese oder eine andere Lösung hat, würde ich es gerne sehen! Dies ist der einzige Fehler, der bisher bei der Website gefunden wurde.

Danke!

Answer 1

ohne das ganze Bild zu sehen, kann ich einen Syntaxfehler für die Wähler in der folgenden Zeile sehen:

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

Der Wähler für sollte die „nicht animiert“ werden schließen „:“ wie folgt:

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

Answer 2

Es klingt, als ob der erste Akt Ihrer Klickfunktion darin bestehen sollte, das Klickereignis von allen divs zu lösen, und sein letzter Akt sollte sein, den Listener wieder einzusetzen.

Die Art und Weise, dies zu tun ist, die meisten der Code in die eigene Funktion setzen (die man außerhalb des $ setzen (document) .ready() {})

So etwas

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

Da Animationen in die Warteschlange gestellt werden, wäre es am besten, wenn Sie die stop() -Methode verwenden, um zu bewirken, dass alle anderen animierten divs außer der aktuell ausgewählten animiert werden. Weitere Informationen finden Sie in der Dokumentation unter http://docs.jquery.com/Effects/stop#clearQueuegotoEnd.