jquery css和动画功能效率答案

【问题标题】：jquery css and animate function efficiencyjquery css和动画功能效率
【发布时间】：2013-04-24 13:40:40
【问题描述】：

所以我想知道你们对使用 jquery css 或 animate 属性动画对象的效率有何看法。比如……

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

这与 css 过渡属性一起工作

CSS：

transition:all 0.7s ease-in-out;

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

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

【问题讨论】：

CSS3 还不是每个浏览器都支持。
您的animate 方法在语法上容易出错。
stackoverflow.com/questions/7866423/… 和 stackoverflow.com/questions/2999749/… 。正如现有问题之一中所暗示的那样，预计移动设备会出现更大的差异
@Terry Young，IC 感谢您的链接，这很有帮助！

标签： jquery css performance jquery-animate

【解决方案1】：

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

【讨论】：

【解决方案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' });
    }
});

【讨论】：

【解决方案3】：

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

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

我个人一直喜欢 jQuery 动画。永远不要太确定 CSS3 浏览器支持！

【讨论】：