Question

Suppose I’ve kicked off a bunch of animations with jQuery. How do I accelerate through these animations to test their side effects without waiting?

In other words. What would this magic tick function look like?

var el = $('selector');
log(el.css("left"));            // 10

el.animate({left:"-=5"}, 1000);

log(el.css("left"));            // ≈10
jQuery.tick(1000);              // accelerate
log(el.css("left"));            // 5

Simply mocking out the setInterval and setTimer doesn’t seem to be enough.

Update

I accepted @jfriend00’s answer for the direct hook into jquery’s animation speed (awesome). For unit testing though, it should be enough to just turn off the fx engine. +1 for those answers!

Answer 1

The very first thing the existing animate function does is call jQuery.speed() to sort through the various argument options to animate() to figure out which is the speed and other options. You could patch into that function and change the speed to a shorter value there.

jQuery.oldSpeed = jQuery.speed;
jQuery.speed = function() {
    var opt = jQuery.oldSpeed.apply(this, arguments);
    opt.duration = Math.floor(opt.duration / 10);
    return(opt);        
}

This wouldn’t change an animation once it had already started, but would just cut the time for all animations. Since many other animations (perhaps all of them) end up calling .animate() themselves, this should work with many other animations too.

You can see this work here: http://jsfiddle.net/jfriend00/6JUGu/. After you press the “Go Faster” button, the next animation cycle will start with the faster speed.