views:

40

answers:

1

Hi folks,

Any way I can interact with a jQuery animation queue?

I would like to be able to use an animation as if it were a movie of some sort, enabling me to rewind, fast forward, or even play the animation from a certain relative time.


I understand if this might be way too complicated to achieve, but for me it's worth asking and finding out. It would be very interesting to discover if this is possible. :)


Any ideas? =)

+2  A: 

In short, there's no real support for this.

The reason is in how it works, it's a simple (well, as simple as possible) forward-only model:
.animate() is done via a setInterval() for most things (see source here). It's a simplistic calculation in most cases, we need to go from value x to value y over n milliseconds. The timer for jQuery happens every 13ms, every animation in progress updates (moves a step) every 13 ms. It divides the (duration/total time) and calls the update step for the element to set it's style value for that step.

You can't "fast-forward" really, as you'd have to adjust properties that aren't exposed once you kick off the animation. You can skip to the end (via .stop(boo, true)) of any animation, or .queue() and .dequeue() when needed...or even mess with the queue directly, at $.data(element,'fxeueue'), but that's it. As for rewind...well, animations are cleaned up (via a .dequeue() move) so that's out too (besides the interval calculations all being forward-looking).

So no, there's no way to do this, at least not with the built-in animation system. That's not to say it's not possible, rather that the code already written in jQurey core won't help you much here.

Nick Craver
@Nick: Thank you so much for your bottomless bucket of knowledge!
RadiantHex