Question

Hi to everyone this is my first ask on stackoverflow
I’ve created a simple code to manage a menu. Here is the code.
http://jsfiddle.net/corvallo/97×89/5/

If I click on “gestione news” all the menu elements will slide left with different delay
and an image (that on jsfiddle u can’t see) with the text “Articoli” will appear.
So i click on the image and the text “articoli” will fadeOut and the menu elements will reappear with delay in the same position as before.
So the problem is that if I try for 4-5 times the first animation(that is the sliding left of the menu elements) will slowdown, and if I try again animation will be slower and slower.

I don’t that the problem is in the delay() functions but in the $.each(), maybe I’m wrong.
Can someone help me with this.
Thank you in advance.

Answer 1

The animations seem to somewhat be still running for a while after they have apparently done their job. Use the following to see when they stop in Firebug or Chrome:

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

I am not sure why they are still running, but you can stop them before running new animations like this:

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

This seems to fix the slowdown issues that you are experiencing.