CODEWITHSUNDEEP
jquerycssperformancejquery-animate
3dsanity
3dsanity

Reputation: 31

jquery css and animate function efficiency

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.

Upvotes: 2

Views: 325

Answers (3)

Trolleymusic
Trolleymusic

Reputation: 2287

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' });
    }
});

Upvotes: 2

Mark-Ross Smith
Mark-Ross Smith

Reputation: 26

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!

Upvotes: -1

Kuba Orlik
Kuba Orlik

Reputation: 3500

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.

Upvotes: 2

Related Questions