jQuery的CSS和動畫功能效率

所以我想知道你所有的想法使用jQuery的css或動畫屬性動畫對象的效率。例如..jQuery的CSS和動畫功能效率

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

預先感謝其輸入爲輸入每個人，或者如果你有更好的建議。

來源

2013-04-24 3dsanity

CSS3並不是每個瀏覽器都支持的。 – melancia 2013-04-24 13:43:11

你的'animate'方法在語法上是容易出錯的。 – undefined 2013-04-24 13:43:41

http://stackoverflow.com/questions/7866423/css3-animations-and-performance-are-there-any-benchmarks和http://stackoverflow.com/questions/2999749/performance-of-css-transitions-vs -js-animation-packages。並且預計在移動設備上會有更大的差異，正如已經在其中一個現有問題 – 2013-04-24 13:43:51

CSS3轉換是硬件加速的，所以你可以在支持的瀏覽器中看到很好的性能提升。我強烈建議使用http://ricostacruz.com/jquery.transit/ - 它會檢測瀏覽器是否支持css3轉換，並在舊版瀏覽器上回退到常規.animate（）。

來源

2013-05-12 12:26:03

-1

jQuery非常適合創建適用於大多數瀏覽器的動畫，但會隨着並發動畫數量的增加而迅速降低，尤其是在使用花式緩動功能（來自jquery.easing.js）的情況下。

隨着並發動畫級別的提高，CSS3動畫效果會更好。然而，他們可以得到更多的支持b您對CSS3動畫的控制較少，而且更難跟蹤，特別是如果您在js中使用回調函數。

就我個人而言，我總是喜歡jQuery動畫。永遠不要太確定CSS3瀏覽器的支持！

來源

2013-05-12 12:36:55

我一直使用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-12 18:30:21 Trolleymusic

jQuery的CSS和動畫功能效率

回答

相關問題