Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery animate() and browser performance

I've got some elements that I'm moving across the page very slowly. Essentially, I'm decreasing the left margin of two images over a span of 40 seconds or so.

Visually, it's working beautifully. However, my processor jumps to about 50% usage during the animations. This isn't specific to any single browser either- it's the same way on Safari3 and Firefox3. If I have both browsers running the page, my CPU is screaming at about 95% usage.

I'm using jQuery 1.3. Both animations are happening concurrently. There's no Flash on the page. If I comment the code out (remove the animation) and refresh the page, my processor immediately returns to normal usage.

I'm hoping I don't have to resort to Flash, but even watching shows on Hulu.com doesn't spike my CPU like this.

Thoughts?

like image 432
Jeremy Ricketts Avatar asked Jan 19 '09 21:01

Jeremy Ricketts


People also ask

What is the use of the animate () method in jQuery?

The animate() method performs a custom animation of a set of CSS properties. This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect. Only numeric values can be animated (like "margin:30px").

Are CSS animations faster than JavaScript?

CSS has fairly good performance as it offloads animation logic onto the browser itself. This lets the browser optimize DOM interaction and memory consumption and most importantly, uses the GPU to improve performance. On the other hand, Javascript performance can range from reasonably faster to much slower than CSS.

Is jQuery used for animation?

With jQuery, you can create custom animations.

What is the default easing used for jQuery animation?

An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing , and one that progresses at a constant pace, called linear .


1 Answers

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; 
like image 52
Alconja Avatar answered Sep 22 '22 19:09

Alconja