jQueryのアニメーションのパフォーマンスモバイルSafariの

Question

私は最近、jQTouchを使ってiPhone用サイトの開発を開始し、次のコードを持っていました：

<li class="title" onclick="showDesc('desc1');">Post Title</li> 
    <li id="desc1" class="shortDesc"> 
     Short description of post content 
     <a href="#viewPost">Read</a> 
    </li> 

<script type="text/css> 
function showDesc(id){ 
    $("#"+id).slideToggle(); 
} 
</script> 

「desc1は」CSSの中に隠されて表示され、ユーザーのクリックを投稿タイトル（私はちょうどモックアップに取り組んでいるので、showDesc（）に渡された引数は現時点ではハードコードされています）

私の問題は、iPhone自体で見ると、アニメーションが非常に遅く、 。それはデスクトップブラウザ（明らかに！）とiPhoneシミュレータで正常に動作し、ユニット自体（iOS 4.3.2を実行中）にあります。

質問：私のコードに問題がありますか？またはjQueryがMobile Safari用に最適化されていないケースですか？

私はモバイルフレームワークにjQTouchを使用していますが、ドキュメンテーションではアニメーションによるページ遷移についてしか説明していませんので、その方法があるかどうかはわかりません。

また、このタスクはCSS3アニメーションに適していますか？

ありがとうございます！

Answer 1

はい、CSS3トランジションを使用することを強くお勧めします。ハードウェアアクセラレーションは、Javascriptアニメーションはそうではないのに対し、ハードウェアアクセラレーションです。 slideToggleアニメーションの不透明度と幅/高さパラメータを遷移させたいと思うでしょう。それは厄介ですが、それはあなたに素晴らしいパフォーマンスをもたらします。

Answer 2

「CSSレンダリングエンジン」にはパフォーマンスを最適化する機会が増えているため、モバイルでCSS3アニメーションを使用する必要があります。特に、トランジション変換（テクスチャの再レイアウトや再レンダリングを引き起こさないもの） - ハードウェア上ではかなりうまくマッピングされます。

Answer 3

それは、判明しているCSS3がはるかに「ネイティブ」オプションではあるが、それ自体が隠さ<李>

に適用されるWebKitの箱-shadowプロパティによって引き起こされた携帯電話上でのレンダリングの問題の多くこのタスクでは、jQueryのslideToggle（）関数がうまく機能しているようです。

私は本当にCSSの概要を詳しく説明しておきましたが、あなたのお勧めに基づいてCSS3アニメーションの詳細を学んだので、それは価値がありました！