JQuery-Funktion seltsam mit Animation

Question

Ich schreibe ein paar ziemlich einfache Funktionen. Im Wesentlichen habe ich eine Navigationsleiste mit mehreren Links. Wenn Sie darauf klicken, wird auf jedem Link ein Div angezeigt, das zuvor angezeigt wurde: Keine. Wenn ein Link angeklickt wird, möchte ich die Navigationsleiste verkleinern und nach oben bewegen. Das funktioniert, aber es scheint ein kleines Problem zu geben.

Ich habe zwei Klassen, die die CSS für die Navigationsleiste enthalten. "Vorher" ist die Klasse, die die CSS für die Navigationsleiste enthält, bevor auf eine Verknüpfung geklickt wird. "Nachher" ist, nachdem ein Link angeklickt wurde und bewirkt, dass die Navigationsleiste kleiner wird und sich nach oben bewegt. Ich habe ähnliche Klassen für die Links in der Navigationsleiste.

Das Problem tritt auf, wenn ich den Funktionen eine Zeitdauer hinzufüge. Ich habe einen Link namens "return", der die Klasse der Navigationsleiste von "after" nach "before" ändert und jede einzelne "page" schließt, die geöffnet wird. Wenn ich auf diesen Link klicke, bevor die "after" -Klasse zur Navigationsleiste hinzugefügt wird - bevor ein anderer Link angeklickt wird - bewegt sich die Navigationsleiste so, als ob die "after" -Klasse hinzugefügt und dann entfernt würde - so wird sie kleiner und dann größer nochmal. Ich möchte, dass der Link "Zurückgeben" beim Klicken nicht aktiv ist und die Navigationsleiste immer noch im Zustand "Vorher" ist.

Gerade jetzt ist mein Code:

$(document).ready(function(){ 
    $("#main_index a").click(function(){ 
     $("#main_index").addClass("after", 500); 
     $("#main_index a").addClass("after_link", 500); 
    }); 
}); 

$(document).ready(function(){ 
    $(".return").click(function(){ 
     $("#main_index").removeClass("after", 500); 
     $("#main_index a").removeClass("after_link", 500); 
    }); 
}); 

Ich habe versucht, eine if-Anweisung an die Funktion .hasClass Zugabe, so dass es nur dann, wenn die richtige Klasse, aber vorhanden ist, führen werde, wenn ich so die Funktionen nicht mehr arbeiten. Dieser Code ist:

$(document).ready(function(){ 
    $("#main_index a").click(function(){ 
     if(("#main_index").hasClass("before")) { 
      $("#main_index").addClass("after", 500); 
      $("#main_index a").addClass("after_link", 500); 
     } 
    }); 
}); 

$(document).ready(function(){ 
    $(".return").click(function(){ 
     if("#main_index").hasClass("after")) { 
      $("#main_index").removeClass("after", 500); 
      $("#main_index a").removeClass("after_link", 500); 
     } 
    }); 
}); 

ich auch Sachen aufzublicken habe versucht, hier aber nichts hat bisher funktioniert. Ich weiß, dass ich irgendwo den Code vermasselt habe, aber ich bin ein Neuling mit JQuery und ich kann nicht herausfinden, warum das, was ich mache, nicht so funktioniert, wie es sollte. Jede Hilfe wäre willkommen.

Answer 1

Wenn falsch ist. Und Sie brauchen nicht zwei bereit. Und .... Addclass brauchen nur eine agrument.

Kontrolle dieses

$(document).ready(function(){ 
    $("#main_index a").click(function(){ 
     //if(("#main_index").hasClass("before")) 
      if($("#main_index").hasClass("before")) { 
      //$("#main_index").addClass("after", 500); 
      $("#main_index").addClass("after"); 
      //$("#main_index a").addClass("after_link", 500); 
      $("#main_index a").addClass("after_link"); 
     } 
    }); 
    $(".return").click(function(){ 
     //if("#main_index").hasClass("after")) { 
      if($("#main_index").hasClass("after")) { 
      //$("#main_index").removeClass("after", 500); 
      $("#main_index").removeClass("after"); 
      //$("#main_index a").removeClass("after_link", 500); 
      $("#main_index a").removeClass("after_link"); 
     } 
    }); 
}); 

Hier ist Jsfiddle Sample

Wenn Sie Animation möchten, dann addClass nicht verwenden. Ich glaube, Sie müssen animate

Answer 2

offensichtliches Problem und Lösung verwenden (kann ich nicht glauben, habe es nicht) - da die erste Funktion mit „main_index a“ und die zweite mit einem Link innerhalb von „main_index genannt wurde "Es hat beide Funktionen ausgeführt, weil es von beiden aufgerufen wurde. Den anderen Links wurde eine Klasse hinzugefügt und die Klasse für die erste Funktion anstelle von "main_index a" aufgerufen und das Problem behoben.