Jquery - Jerky animation

Question

I have a little animation that's running a bit jerky in all browsers. Is there something I'm doing wrong?

Here's my code: http://jsfiddle.net/iltdev/nN6cT/2/

Answer 1

One thing you are doing wrong, is that you are firing new animations before the previous ones have finished for an element..

That is because you are using the timing plugin and firing the new animation on fixed intervals. Better to use the callback argument of the .animation() method and start a new animation after the previous has completed..

demo at http://jsfiddle.net/gaby/qaGyS/2/

---

Another thing, is that you are animating a very small distance over a long time (for that distance). For example you animating 10 pixels over a second .. this is slow and you can see the individual movements..

with faster animations at http://jsfiddle.net/gaby/qaGyS/1/