Rotate an image synchronously along a curve with jQuery.animate()

Question

How does jQuery.animate() determine the number of "frames" that are necessary to perform its function? I thought this (Fiddle) would perform 90 adjustments over the course of 2 seconds, but it ends up performing 150.

That makes it difficult to synchronize the angular rotation of the missile with the curve. I want it at that speed or slower, yet slowing it down further only increases the rotational effect. To see how it should appear (roughly), change duration: 2000 to 1250.

Update: Inexplicably, the Fiddle only appears to work in Chrome (not Firefox). No idea why.

Answer 1

The correct way to do this is to use the progress callback function which jquery provides. See the docs: http://api.jquery.com/animate/, and within that, use only the parameters it gives you;

$thing.animate({left:100},{progress:function(animation, progress, remaining){
    // do stuff with progress
}});

(Edited: sorry, progress not step)

Here is an update to your fiddle: http://jsfiddle.net/a9eXE/78/ (I actually am using step there, simply because it's easier to get the current tweened progress, and it makes no difference when you're only animating a single property)