CODEWITHSUNDEEP
jqueryunit-testingtime
Dane O'Connor
Dane O'Connor

Reputation: 77298

How do I accelerate all jquery animations?

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!

Upvotes: 0

Views: 328

Answers (4)

jfriend00
jfriend00

Reputation: 707446

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.

Upvotes: 3

Richard Neil Ilagan
Richard Neil Ilagan

Reputation: 14747

Under the pretext of unit testing, I'm assuming that you want to skip all animations but still keep their intended effects?

If that's what you want, you can just set $.fx.off = true and this will globally disable all jQuery animations from tweening, or animating, but they will all still go to their logical end. So .animate() becomes essentially the same as .css() because of the lack of animation.

If you're looking for something more modular, you can look at calling .stop(bool,bool) on your elements instead. Passing in true for the second argument, for example, stops the currently running animation on the selected elements and jumps to the animation's logical end.

Upvotes: 2

Ross Deane
Ross Deane

Reputation: 3200

Or just reduce the duration to less than 1000? :)

Upvotes: 0

Vigrond
Vigrond

Reputation: 8198

I think you'd either have to set a multiplier on the time for each animation (probably not an option)

or you could set $.fx.off = true; (http://api.jquery.com/jQuery.fx.off/) to immediately see the difference. (you wouldn't see acceleration, just an instant change).

Upvotes: 1

Related Questions