JQuery: Unwanted animation slowdown

Go To StackoverFlow.com

1

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/97x89/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.

2012-04-05 22:51
by corvallo


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.

2012-04-05 23:08
by Cyrille Ka
Thank you for your answer i've already try using the stop() function and when I try this, slowdown still persist.Now i retry to put stop and slowdown isn't present. However forgive my bad english and thank yo - corvallo 2012-04-05 23:52


0

Put your menu in a div. Instead of doing a foreach on each element, animate the main div.

Delay should not be causing your issue as all that does is wait to begin the animation timing, but having that many animations going at once is starting several internal timers instead of just one, which could lead to hiccups.

2012-04-05 22:56
by FlavorScape
Ads