2

所以我想知道你们对使用 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.
});

提前感谢大家的输入，或者如果您有更好的建议。

4

3 回答 3

2

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

于 2013-05-12T12:26:03.697 回答
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' });
    }
});
于 2013-05-12T18:30:21.957 回答
-1

jQuery 非常适合创建适用于大多数浏览器的动画，但会随着并发动画数量的增加而迅速下降，特别是如果您使用花哨的缓动函数（来自 jquery.easing.js）。

随着并发动画水平的提高，CSS3 动画的表现会更好。但是它们可以在更多 b 中得到支持 你对 CSS3 动画的控制较少，而且它们更难以跟踪，特别是如果你在 js 中使用回调函数。

就我个人而言，我总是喜欢 jQuery 动画。永远不要对 CSS3 浏览器支持太确定！

于 2013-05-12T12:36:55.843 回答