jQuery的動畫速度不匹配CSS3過渡速度

我有了與.2s的速度CSS3過渡鏈接導航菜單。當這些鏈路徘徊，及其子菜單顯示有使用jQuery的fadeIn和fadeOut方法也與.2s（200毫秒）的速度。jQuery的動畫速度不匹配CSS3過渡速度

然而，子菜單似乎動畫一點點比鏈接速度較慢。難道這只是一個緩解差異或差異，因爲它們是兩種完全不同的「動畫」方式？

的jQuery：

$(document).ready(
    function(){ 
    $('#nav li').has('ul').hover(
     function(){ 
     $(this).find('ul').stop(true, true).fadeIn(200); 
     }, 
     function(){ 
     $(this).find('ul').stop(true, true).fadeOut(200); 
     }); 
});

CSS：

#nav ul li a{ 
    height: 40px; 
    display: block; 
    padding: 0 15px; 
    background-color: transparent; 
    line-height: 40px; 
    text-decoration: none; 
    color: #ccc; 
    text-shadow: 0 -1px 0 #002745; 
    -webkit-transition: all .2s; 
    -moz-transition: all .2s; 
    transition: all .2s; 
}

有沒有辦法讓他們相同的速度沒有做明顯的「加速慢動畫」？

這顯然是沒有什麼重大的，但如果它可以是固定的，這將是巨大的。

感謝

來源

2011-12-03 scferg5

什麼是你的CSS和jQuery'.animate（）'代碼的樣子？ – Jasper

這很難不你的CSS動畫代碼說。你可以爲我們做的最好的事情是在jsfiddle中重現它 - http://jsfiddle.net/ – Vigrond

我不認爲你可以有一個期望，兩個完全不同的觸發渲染的手段應該具有相同的速度。 jQuery的開銷需要處理，而CSS3動畫將使用內置的渲染引擎。關於我的頭腦，我可以想到jQuery的選擇器引擎sizzler需要找到目標，然後它可能需要考慮瀏覽器差異，檢查動畫隊列等。

來源

2011-12-03 05:32:27 mrtsherman

是的，這就是我的想法。我只需要加快jQuery速度。 – scferg5

它也可能有助於調整FX間隔（但這不會有助於持續時間） - http://api.jquery.com/jQuery.fx.interval/ – simshaun

默認情況下，jQuery的動畫功能包括fadeIn和fadeOut，使用easing值的swing，它採用了大致的S形曲線加速。您可以嘗試設置easing: 'linear'以排除緩解差異的可能性。

來源

2011-12-03 05:37:14 Aaron

這裏的jQuery VS CSS動畫的比較試驗：http://css3.bradshawenterprises.com/demos/speed.php

他解釋說，CSS動畫比jQuery的更快，因爲它們在C++編譯算法，而不是JavaScript的需要運行的算法。

稍後閱讀的反饋顯示了一個使用JavaScript框架的測試示例，名爲d3.js，它提供了可比較的速度。

來源

2012-03-20 18:23:31 bafromca

正是我要鏈接到！另外，jQuery現在也可以使用requestAnimationFrame，所以應該儘可能快。也許我應該寫另一個比較，但使用jQuery的新功能... –

jQuery的動畫速度不匹配CSS3過渡速度

回答

相關問題