javascript - Animation: jQuery VS CSS: jQuery lags, why? - jsFiddle comparisonexample - Stack Overflow

admin管理员组

文章数量:1415421

JSFiddle

I have an example parison of the exact same animation performed by jQuery and another by CSS. The animation is so little, not much happening, so why is jQuery lagging like it is? This is ridiculous.... CSS is animating beautifully though.

Can someone tell me why jQuery animations lag, even when they're as small as this?

JSFiddle

I have an example parison of the exact same animation performed by jQuery and another by CSS. The animation is so little, not much happening, so why is jQuery lagging like it is? This is ridiculous.... CSS is animating beautifully though.

Can someone tell me why jQuery animations lag, even when they're as small as this?

• javascript
• jquery
• animation
• css
• lag

Share Improve this question Follow edited Aug 2, 2011 at 18:04 Sparky 98.8k2626 gold badges202202 silver badges290290 bronze badges asked Apr 10, 2011 at 15:59 android.nickandroid.nick 11.2k2424 gold badges7979 silver badges112112 bronze badges 4

• I guess it's because jquery has to modify the padding of the DOM element using timers and a loop. The CSS is part of the browser engine – JohnP Commented Apr 10, 2011 at 16:03
• Also, there is no point in adding 'backgroundColor': 'rgb(229, 243, 250)' in your animate call. That doesn't get animated – JohnP Commented Apr 10, 2011 at 16:04
• if you are referring specifically to Safari's CSS transitions, then one reason is that they are hardware optimized for iOS (and OSX) devices. – DA. Commented Apr 11, 2011 at 4:42
• I'm referring to webkit, firefox and opera browsers. Safari is as optimized for osx devices as chrome is. They both run webkit, chrome is just done better. – android.nick Commented May 4, 2011 at 6:20

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You must remove the CSS transition rules on the div animated by jQuery, in this example:

http://jsfiddle/mT39H/

Both behave the same.

The reason is that jQuery animates by changing the position x times per second, but then the browser tries to animate between these values.

I'd say it has to do with the ratio of paddingBottom to the animation time. Try changing animation time to a smaller value and you'll see it's a lot smoother.

(set to 75ms - link)

本文标签： javascriptAnimation jQuery VS CSS jQuery lagswhyjsFiddle comparisonexampleStack Overflow