javascript：jQueryやCSSがアニメーション化されている場合、Raphaelはスムーズに動作しなくなりますか？

Question

My site：

jQuery Animation (`comsat.js`: `showPlayerActionView()`): 

if (container == cs_characterSliderPlayerOne){ 
    container.show("slide", {direction: "left"}, 500); 
} else if (container == cs_characterSliderPlayerTwo){ 
    container.show("slide", {direction: "right"}, 500); 
} 

ラファエルアニメーション：

this.hover(function(event) { 
        cs_playerList[i].animate({ 
         fill: HEX_HOVER_COLOR 
        }, 500); 
       }, function(event) { 
        cs_playerList[i].animate({ 
         fill: DEFAULT_HEX_COLOR 
        }, 500) 
       }); 

ので、それぞれのアニメーションは、他のが無効になっている時にスムーズに完全に実行するようだが、両方が有効になっているとき、彼らはレンダリングのためeatchother戦うようですほとんどの時間、その結果、スローダウンします。これを解決する方法はありますか？ 200フレームでレンダリングする必要がないアニメーションを1秒間（推測）、リソースを共有して他のものが滑らかに見えるようにするか、

CSS3トランジションアニメーション（サイトには表示されていません）を使用すると、同じ減速が発生します。多分マルチスレッド化が助けになるだろうか？ JavaScriptでこれをどうやって行いますか？

Answer 1

2011年10月にリリースされたラファエル2は、アニメーションコードにいくつかの変更が加えられました。新しいブラウザAPI「requestAnimationFrame」を使用してアニメーションが実行され、古いブラウザは約60FPSで動作します。

jQueryは1.6シリーズの初期にrequestAnimationFrameを採用しましたが、さまざまなjQueryユーザーが、アニメーションキューがバックアップされ、ウィンドウが失われてフォーカスを取り戻すにつれて恐ろしいキャッチアップアニメーションにつながったと報告したときに再び削除しました。

アニメーションはラファエル2で、よりスムーズに実行する必要がありますが、おそらくないほどスムーズに、彼らは同じようにjQueryはまた、我々はあなたのウェブサイト上でこれを再現することができますどのようにrequestAnimationFrameの