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

• 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

2 Answers 2

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)