jquery css和动画函数效率

Question

所以我想知道你们对使用jquery css或animate属性设置对象动画的效率有什么看法。例如..

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

这与css转换属性一起工作

CSS：

transition:all 0.7s ease-in-out; 

VS

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

提前感谢大家的意见，或者如果你有任何更好的建议。

Answer 1

CSS3转换是硬件加速的，因此您可以在支持的浏览器中看到极大的性能提升。我强烈推荐使用http://ricostacruz.com/jquery.transit/ -它可以检测浏览器是否支持css3转换，并在较旧的浏览器上回退到常规的.animate()。

Answer 2

我一直在使用css过渡，并且总是认为jquery动画是备用选项。如果你还没有准备好，那就开始在你的项目中使用现代吧(http://modernizr.com) --它是一个功能检测库。您可以根据浏览器支持的内容来实现回退，因此在这种情况下：

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

Answer 3

jQuery非常适合创建在大多数浏览器上都能很好地工作的动画，但随着并发动画数量的增加，它的性能会迅速下降，特别是当您正在使用奇特的缓动功能(来自jquery.easing.js)时。

随着并发动画级别的增加，CSS3动画表现得更好。然而，它们可以在更多的地方得到支持。你对CSS3动画的控制较少，而且它们更难跟踪，特别是当你在你的js中使用回调函数的时候。

就我个人而言，我一直喜欢jQuery动画。对CSS3浏览器的支持永远不会太有把握！