jQueryのアニメーションの速度がCSS3の遷移速度に一致しない

Question

私はCSS3の遷移と0.2秒の速度でリンクするナビゲーションメニューを持っています。それらのリンクがホバリングされると、それらのサブメニューは、同様にfadeInとfadeOutメソッドを使用して.2s（200ミリ秒）の速度でjQueryで表示されます。

しかし、サブメニューはリンクより少し遅くアニメーション化されているようです。これは、単にアニメーション化する2つの全く異なる方法であるため、簡単な違いか違いがありますか？

の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; 
} 

"遅くアニメーションをスピードアップし、" 明白なことをやっずに同じ速度にする方法はありますか？

これは明らかに大きなものではありませんが、修正できればそれは素晴らしいでしょう。

おかげ

Answer 1

私はあなたがレンダリングを誘発する2つの完全に異なる手段が同一の速度を持つべきであるという期待を持つことができるとは思いません。 jQueryにはオーバーヘッドがありますが、CSS3アニメーションは組み込みのレンダリングエンジンを使用します。私の頭の上では、jQueryのセレクタエンジンsizzlerがターゲットを見つける必要があるという事実を考えることができます。そして、ブラウザの違いを考慮したり、アニメーションキューをチェックしたりする必要があります。

Answer 2

デフォルトでは、jQueryのアニメーション関数fadeInとfadeOutを含むeasingの値はswingで、これはほぼS字型の加速カーブを使用します。あなたは、緩和の不一致の可能性を除外するためにeasing: 'linear'を設定しようとするかもしれません。ここで

Answer 3

は、CSSアニメーション対のjQueryの比較テストです：http://css3.bradshawenterprises.com/demos/speed.php

彼は、彼らはむしろJavaScriptが必要ですランタイムアルゴリズムよりも、C++でのアルゴリズムをコンパイルしているので、CSSアニメーションはjQueryのよりも高速であることを説明しています。

読み込み後の反駁では、同程度の速度を提供するd3.jsというJavaScriptフレームワークを使用した彼のテストの例が示されています。