2011-07-28 9 views
4

jQueryアニメーションを使用して、Webページ上の項目をスライドします。なんらかの理由で、Webkitブラウザでのみ、要素がアニメ化された空間全体にアーティファクトが残っています。これをやめないようにする方法はありますか?彼らはあなたがここにページ読み込み後にカルーセルに見られるjQueryアニメーションを使用しているときにWebkitブラウザに表示される成果物を非表示にする方法はありますか?

:ここでは、このマシンでhttp://www.mywebclass.org/~jeff/

答えて

4

を使用する必要がありますChrome & Safari。私は、テキストに残っているパディングを使用し、調整するためにアニメーションを調整することで問題が解決されたことがわかりました。

+0

これは最も簡単です。ありがとう! – chromedude

1

は、私がどんな道を見ることはできませんが、私はあなたが話している影響を知っています。

これは直接的な解決策ではありませんが、私は、遅いシステムでは左プロパティのアニメーション化がリソース重視であることを覚えているようです。 overflow:hidden;が設定されている<div>と、これらのアニメーションの代わりにscrollLeft()にアニメーションを適用して移動する1つの大きなスライドで作業すると、よりスムーズな全体的な体験につながるでしょう。

デザイナー向けのjQueryに関する記事がありましたが、見つけたら更新します。

更新:"jQuery for Designers - Fun with Overflows"

+0

ああ...非常に興味深い考えです。私はそれを調べなければならないでしょう。 – chromedude

1

私は、私は非標準のフォントを使用することによって引き起こされていると思いH1にアニメーションの残り物を参照してください。

これは解決策ではありませんが、それを防ぐことができない場合は、ウェブページを1ピクセル上下にスクロールするだけで、その小さな悪魔を取り除くことができます。

また、古いバージョンのjQuery(1.6.2ではなく1.3)を使用していますが、これには理由がありますか?左プロパティを使用してアニメーション@フォントフェーステキストの左側に

$(this).addClass('active'); 
scrollTo(document.body.scrollLeft, document.body.scrollTop + 1); 
scrollTo(document.body.scrollLeft, document.body.scrollTop - 1); 
+0

jqueryバージョンについての良い点。なぜ私たちが1.3を持っているのか分かりません。 – chromedude

1

トレイル:いない場合は、その後、戻って1ピクセルまで1ピクセルをスクロールダウンして、あなたのアニメーションのコールバックでは、最新バージョン

関連する問題