Why are slow jQuery animations choppy?

Question

I'm having a hard time googling this issue because most of the things I can find are about animations that are supposed to be fast but are acting slow. My question is regarding an animation that I want to have a long duration but still be smooth.

I've created this jsfiddle to demonstrate the issue: http://jsfiddle.net/93Bqx/

I'm trying to make an element slowly move to another position over time. But the animation is very choppy.

Basically, it boils down to something like this:

$elem.animate({
        left: x,
        top: y
}, someLargeNumber);

I'm wondering if the problem is that the animation is so slow that each step is less than a pixel and so it is rounding them to either 0 or 1 making it appear to drop frames and then move all at once. But I don't know how I would check or fix this.

Is there a better way to be doing slow animations so they're smooth? I had a similar one created with CSS3 and translate(x,y) that was smooth but unfortunately I need more flexibility than I think I can get with CSS.

Answer 1

I guess it's the inevitable bargain with doing animation programmatically. Maybe try a framework specialized in animation like:

http://www.greensock.com/gsap-js/

but adapting the animation to CSS would be best.