jquery css和动画功能效率

所以我想知道大家对使用jquery css或animate属性设置对象动画的效率有何看法。例如

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

这与css转换属性一起工作

CSS:

VS

---

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

CSS3转换是硬件加速的，因此您可以在受支持的浏览器中看到性能的极大提升。我强烈建议使用-它检测浏览器是否支持css3转换，并在较旧的浏览器上返回到常规的.animate（）。

jQuery非常适合创建在大多数浏览器上都能正常工作的动画，但随着并发动画数量的增加，动画质量会迅速降低，特别是如果您使用的是奇特的easing函数（来自jquery.easing.js）

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

---

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

我一直在使用css转换，并始终将jquery动画视为备用选项。如果您还没有，那么开始在项目中使用Modernizer（）--它是一个特性检测库。您可以根据浏览器支持的内容实施回退，因此在这种情况下：

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

---

CSS3还不是每个浏览器都支持的那么多。你的

animate

方法在语法上很容易出错。和。而且，正如一份现有的报告中已经提到的那样，移动设备将出现更大的差异questions@Terry杨，谢谢你的链接，这很有帮助！

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

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