jQuery performance: css vs animation methods

Question

I am trying to avoid using animation because it is slower than CSS3 animations.

I was just wondering if using css method still being faster than animation but slower than a direct CSS3 animation with transform3d.

$(this).animate({'opacity' : 'show', 'top' : topPosition+'px'});

vs

$(this).css('top', topPosition+'px');

As you can see, I can not directly use css3 transform3d because i need the position parameter, which is dynamically generated.

CSS

#flashMessage{  
    position: relative;
    transition: all 1.4s ease-in-out;
    -webkit-transition: all 1.4s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 1.4s ease-in-out; /** Firefox **/
    -o-transition: all 1.4s ease-in-out; /** Opera **/
}

user2202413 · Accepted Answer · 2013-03-28 16:05:01Z

2

jquery animation is different than jquery css, first one it animate the elm during set of time, while the other one it just apply the css property instantly without animating.

css tansition could be faster but it's not supported in all browsers, especially ie <9.

you have syntax error in your animate code, it should be:

$(this).animate({'opacity' : 1, 'top' : topPosition+'px'}); //+'px' is not required it would work with/without it.

if you want your animation to work on all browsers i would use animate, otherwise if you want it to work in major browsers only css transitions would be a better option although it doesn't give you the flexibility jquery does.

answered Mar 28, 2013 at 16:05

user2202413

Sign up to request clarification or add additional context in comments.

4 Comments

Alvaro Over a year ago

Right now I am looking for a performance improvement and as I noticed jQuery works slower in Internet Explorer, I would opt to avoid transitions on it. CSS3 will just show the content in the correct place without them. Then, is css method faster than animation as I am applying it?

user2202413 Over a year ago

jquery animation and css transitions would take the same exact time if you set duration parameter in jquery animate equal to the transition one, however the FPS(frames per second) would be differned depending on the browser and the kind of animation. applying css properties directly would be ofcourse faster than using jquery css method or jquery animate. and last jquery css is always faster than jquery animate.

Alvaro Over a year ago

The animation will therefor run faster using the css method instead of the animation one? Is it like using CSS3 ?

user2202413 Over a year ago

yep it would be faster. jquery css method is the same as using css3, only difference is css3 define values at page load, while jquery css can change css properties dynamically during or after page load.

Andrew · Accepted Answer · 2013-03-28 16:29:47Z

0

When I can I use CSS animation but tend to use jquery to add and remove the animation class so that the animation starts when I want it to and stops when I want it to.

It can be useful to use them both together.

Of course when using CSS animation you need to think about what browsers will handle it.

http://api.jquery.com/addClass/

answered Mar 28, 2013 at 16:29

Andrew

1,88015 silver badges19 bronze badges

Collectives™ on Stack Overflow

jQuery performance: css vs animation methods

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related