1

でコンテナ div を作成してスライド式カルーセルを作成し、その中に位置overflow:hiddenをアニメーション化して移動しようとしている画像 div を作成していleftます。そのようです：

HTML

<div id="placeholder">
    <div id=carousel>

         <img src="wideimagestitched.png">

    </div>
</div>

CSS:

#placeholder {
    position: relative;
    width: 500px
    overflow: hidden;
}

 #carousel {
  position: absolute;
  top: 0px;
  left: 0px;
        }

jQuery:

$("#rightbutton").click(function(event){

event.preventDefault();
$("#carousel").animate({"left": "-500px"}, 1000)

});

これは Firefox では問題なくスムーズに動作しますが、クロムではcarouseldiv が約 200px ジャンプしてから右にアニメーション化されます。私はそれを遅くしました、そしてインラインスタイルが適用されているのを見ることができます、そしてそうです-アニメーション化する前に、そこに200pxほど後方にジャンプしています.

どんな助けでも大歓迎です！

4

3 に答える 3

0

このプラグインでハードウェアアクセラレーションを使用してみることができます：http： //playground.benbarnett.net/jquery-animate-enhanced/

本当にスムーズに動作します

于 2012-09-27T19:48:33.763 に答える
0

問題は fouc にあると思います。jquery は document.ready 状態の後に機能するため、ブラウザが dom から読み取ったコンテンツは jquery が動作していなくても表示されます。DOM が読み取られるまで、関係するコードを可視化:非表示にします。適切に document.ready unhide で、同様の問題に直面した次の例を見ることができます

フォーカス例

于 2012-09-27T19:34:08.583 に答える
0

あなたのコードは正常に動作します このデモを参照してください

于 2012-09-27T17:03:51.687 に答える