jquery css and animate function efficiency

Question

So I was wondering what you all thought about the efficiency of animating objects using jquery css or the animate property. For example..

$('button').click(function(){
     $('obj to change').css( 'pos', x );
});

this works along with the css transitioning property

CSS:

transition:all 0.7s ease-in-out;

VS

$('button').click(function(){
     $('obj to change').animate({ pos , 'x' });
}, 2000, function() { 
     // Animation complete.
});

thanks in advance for the input for the input everyone, or if you have any better suggestions.

http://stackoverflow.com/questions/7866423/css3-animations-and-performance-are-there-any-benchmarks and http://stackoverflow.com/questions/2999749/performance-of-css-transitions-vs-js-animation-packages . And would expect a greater difference in mobile devices, as already suggested in one of the existing questions — Terry Young, Apr 24 '13 at 13:43

score 2 · Answer 1 · answered May 12 '13 at 12:26

CSS3 transitions are hardware-accelerated, so you can see a great performance boost in supported browsers. I highly recommend using http://ricostacruz.com/jquery.transit/ - it detects whether the browser supports css3 transitions and falls back to regular .animate() on older browsers.

score 2 · Answer 2 · answered May 12 '13 at 18:30

I use css transitions all the time and always think of jquery animation as the fallback option. If you're not already, start using Modernizr in your projects (http://modernizr.com) -- it's a feature detection library. You can implement fallbacks based on what the browser supports, so in this case:

$('button').click(function(){
    // Does the browser support csstransitions?
    if (Modernizr.csstransitions) {
        // If so, change the css and let the browser animate the transition
        $('obj to change').css( 'pos', x );
    } else {
        // Otherwise use jQuery to animate the transition
        $('obj to change').animate({ pos , 'x' });
    }
});

score -1 · Answer 3 · answered May 12 '13 at 12:36

jQuery is great for creating animations that work well across the majority of browsers, but quickly degrades as the amount of concurrent animations increase, especially if you are using fancy easing functions (from jquery.easing.js).

CSS3 animations hold up better as the level of concurrent animations increase. However they could be supported in more b You have less control over CSS3 animations and they are more difficult to track, especially if you are using callback functions in your js.

Personally I always favour jQuery animation. Never can be too sure about CSS3 browser support!

jquery css and animate function efficiency

3 Answers3