jQuery animate() and browser performance

I know this is an oldish question and Tim provided a great answer, but I just thought I should post an update for anyone looking for a solution to this problem, since there's now a simpler way...

As of jQuery 1.4.3 you can set the interval jQuery's animate uses directly via the jQuery.fx.interval property. So you can simply do something like:

jQuery.fx.interval = 50;

I think the way jQuery animate() works is that it uses a timer that periodically fires and invokes a function that updates the DOM to reflect the state of the animation. Typically animations are relatively short and they may cover a fair amount of screen real estate, so I suspect (without confirming) that the timer expires, and is reset, at a fairly high rate to generate a smooth animation. Since your animation takes a long time, you might be able to modify the animate function so that the rate at which the animation proceeds can be set via an option. In your case you'd only need to update every 250ms or so since you're covering about 3-4 pixels per second, roughly.

People have mentioned slowing down jQuery's refresh rate. You can override the timer function in jQuery 1.4 with this file (jquery.animation-fix.js):

function now() {    return (new Date).getTime();}jQuery.fx.prototype.custom = function( from, to, unit ) {    this.startTime = now();    this.start = from;    this.end = to;    this.unit = unit || this.unit || "px";    this.now = this.start;    this.pos = this.state = 0;    var self = this;    function t( gotoEnd ) {        return self.step(gotoEnd);    }    t.elem = this.elem;    if ( t() && jQuery.timers.push(t) && !jQuery.fx.prototype.timerId ) {        //timerId = setInterval(jQuery.fx.tick, 13);        jQuery.fx.prototype.timerId = setInterval(jQuery.fx.tick, 2050);    }}

So modify the line with this in it

jQuery.fx.prototype.timerId = setInterval(jQuery.fx.tick, 50);

Change the 50 to whatever interval you want. That is in Miliseconds (ms)

If you save this code in a different file, you can attach it like this:

<script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script><script src="/js/jquery.animation-fix.js" type="text/javascript"></script>