Why is jQuery animation getting messed up when it is not the active tab?

You can see whats happening here.. http://jsfiddle.net/gregguida/36SEZ/4/

Switch tabs for about 30 seconds and then come back, the animation gets totally out of hand.

I think this has something to do with the way the browser treats setInteval() when the window doesn't have focus but I'm not sure if that's the case. I also don't know what to do about it. Any insight is appreciated.

Update: also tried using setTimeout instead of setI开发者_Go百科nterval but I'm experiancing similar results

Thanks!

I ran into the same when creating an animation for my site. The way I got around it was by removing the call to setInterval and setting a new timeout each time the animation is completed.

Here is your code updated to use that approach: http://jsfiddle.net/36SEZ/5/

Note that the call to setTimeout should be called only once after all of the animation is finished. In order to make sure that happens I've put it in the complete function of the last animation on the last div.

You should read the second note at http://api.jquery.com/animate/#notes-0