JQuery：望ましくないアニメーションのスローダウン

Question

こんにちは皆、これは私の最初の質問です。ここにコードがあります。
http://jsfiddle.net/corvallo/97x89/5/

私は「Articoli」は表示されるテキストで「GESTIONEニュース」すべてのメニュー要素が異なる遅延 と画像で左側のスライドします（そのjsfiddleにuが見ることができない）をクリックした場合。
画像をクリックすると「articoli」というテキストがfadeOutになり、メニュー要素が以前と同じ位置に遅れて表示されます。
問題は、最初のアニメーション（メニュー要素の左にスライドしている）が4-5回試してみると、アニメーションが遅くなり、遅くなります。

私は問題がdelay（）関数にあるのではなく、$ .each（）で、多分私が間違っているとは限りません。
誰かがこれを手伝ってくれますか？
ありがとうございます。

Answer 1

アニメーションは、明らかに仕事をしてからしばらくはまだ実行されているようです。彼らはFirebugのか、Chromeで停止したときに参照するには、以下を使用します。

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

私はなぜ彼らはまだ実行されていることを確認していないが、あなたはこのように新しいアニメーションを実行する前に、それらを停止することができます

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

このあなたが経験している減速の問題を解決するようです。

Answer 2

メニューをdivに配置します。各要素に対してforeachを実行する代わりに、main divをアニメーション化します。

遅延は、アニメーションのタイミングを開始するのを待っていますが、一度に多くのアニメーションを実行するだけで、1つではなく複数の内部タイマーが開始されるため、問題につながることはありません。