JQuery: Unerwünschte Animation Verlangsamung

Question

Hallo an alle, das ist meine erste Frage auf stackoverflow
Ich habe einen einfachen Code erstellt, um ein Menü zu verwalten. Hier ist der Code.
http://jsfiddle.net/corvallo/97x89/5/

Wenn ich auf „gestione news“ werden alle Menüelemente mit unterschiedlichen Verzögerungs und ein Bild schieben links (das auf jsfiddle u nicht sehen kann) mit dem Text „Articoli“ erscheint.
Also klicke ich auf das Bild und der Text "Artikoli" wird FadeOut und die Menüelemente werden mit Verzögerung in der gleichen Position wie zuvor wieder erscheinen.
Also das Problem ist, dass, wenn ich für 4-5 mal versuche die erste Animation (das ist die Verschiebung der Menüelemente links) wird langsamer, und wenn ich es erneut versuche Animation wird langsamer und langsamer.

Ich nicht, dass das Problem in den Funktionen delay() ist, aber in der $ .each(), vielleicht liege ich falsch.
Kann mir jemand dabei helfen.
Vielen Dank im Voraus.

Answer 1

Die Animationen scheinen noch eine Weile zu laufen, nachdem sie ihren Job scheinbar erledigt haben. Verwenden Sie die folgenden, um zu sehen, wenn sie in Firebug oder Chrome stoppen:

$(this).animate({"marginLeft":"0px"},"slow", function(){console.log("anim stopped");}); 

Ich bin nicht sicher, warum sie noch laufen, aber man kann sie stoppen, bevor neue Animationen wie folgt ausgeführt werden:

$(this).stop().animate({"marginLeft":"0px"},"slow"); 

Diese scheint die Verlangsamung Probleme zu beheben, die Sie erleben.

Answer 2

Setzen Sie Ihr Menü in ein Div. Anstatt für jedes Element eine foreach auszuführen, animiere das Hauptdiv.

Verzögerung sollte nicht Ihr Problem verursachen, da alles, was tut, wartet, um das Animationstiming zu beginnen, aber mit so vielen Animationen auf einmal startet mehrere interne Timer statt nur einer, was zu Schluckauf führen könnte.