Question

edit: when I add .stop() right before I call .clearQueue(), it works correctly. Don’t know why though, I thought they were basically doing the same thing.

I have a jQuery animation that animates the background of each character in a span, that makes it basically look like a loading bar of some kind (the animation is in a queue).

Check it out here: http://jsbin.com/efawub/4/edit#preview (for one reason or the other it does not work in FF for me)

Issue is the following:

Hit play, then hit stop quickly after; then hit play again: the animation now runs faster than it should, (most promiment in the first span)!

Compare this to a normal run: hit play, let it run til the end, hit stop, hit play again: normal speed

The phenomenon also goes away when you wait a few seconds after hitting stop and pressing play again; the problem is also less prominent when you stop the animation towards the end, instead of towards the beginning.

Any ideas?

Answer 1

I finally wanted to address this. The solution was to use standard javascript, not jquery (I still don’t know why it happens with jquery). A simple setTimeout loop did the trick. I updated the original jsbin, and left the old code commented out.