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动画视为后备选项。如果您还没有，请在项目中开始使用Modernizr（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动画会更好。但是它们可以得到更多支持b你对CSS3动画的控制较少，而且它们更难以跟踪，特别是如果你在js中使用回调函数。

我个人总是喜欢jQuery动画。永远不能太确定CSS3浏览器的支持！

jquery css和动画功能效率

3 个答案: