このJavascript/jQueryアニメーションをより良くするにはどうすればよいですか？

Question

ウェブページは - http://schnell.dreamhosters.com/spriteanimate.html

ページに移動し、[ソースを表示]をクリックすると、すべてのコードが表示されます。

今はかなり簡単です。右矢印キーはXを右に、左矢印キーは彼を左に移動させます。彼は正しい方向に動くアニメーションを行い、実際のイメージ要素は同じ方向に動く。

ここで私が主に持っている問題は、最適化です。周りを少し遊んでいると、アニメーションが常に滑らかではなく、最初の数秒間は何かを読み込んでいるような非常に遅い感じがします。左に行くためのアニメーションは特にこれの有罪です。もう一つの問題は、jQueryの.animate（）です。それは一種のストップ・アンド・ゴー・モーションを行い、あなたは伝えることができます。画像要素の動きはぎくしゃくで、あまり滑らかではありません。

jQueryの.animate（）は、イージングなどで微調整することができますが、それが答えなのか、時折実行中の遅れなどが残っているかはわかりません。だから誰にも何か提案がありますか？

Answer 1

スプライト画像の画像プリロードを使用するか、より良い方法として、1つの画像をスプライトとして使用し、画像ファイルを交換する代わりに、画像ファイルの位置をシフトします。これを実現するには、イメージを背景イメージとして設定し、背景位置をシフトする必要があります。

また、リニアイージングを使用してください。そうしないと、デフォルトでスイングが開始され、ゆっくりと入り込みます。

Answer 2

標準のjQueryアニメーションではなくCSS3のトランジションを使用することを検討しましたか？そうすることで、パフォーマンスは飛躍的に向上しますが、クロスブラウザーとの互換性は失われます。ここだけChromeで動作しますが、パワークール例えば

http://css3.bradshawenterprises.com/