画像のスタックを同じ場所に置いていますが、zIndex = -1を設定して目に見えるもの。ページの反対側にはすべてのイメージ名のリストがあり、特定のイメージ名にマウスを移動すると、そのイメージがフェードインして表示され、以前に表示されたイメージがフェードアウトするようになります。私はこのコードでこれを行います。jQuery:別のCSS属性を変更する前にCSSのアニメーションが完了するまで待ちます
$(this).hover( //visible and hover below are variable names
visible.css({opacity: '0',zIndex: '-1'}); //the previous image diassapears
hovered.css({ zIndex: '1', opacity: '1'}); //the new image fades in
)
そして、不透明度プロパティをCSSでトランジションすることによって、これを行います。 問題は、新しい画像名の上にマウスを置くと、古い画像がフェードアウトせずに消え、新しい画像がフェードインし始めるということです。古い画像は実際には消えてしまいますが、 zIndex = -1になり、すぐに有効になります。私はこれを解決する最善の方法を尋ねたいと思います。 jQueryアニメーションを使用せずに、純粋なCSSアニメーションを使用するだけで、CSSアニメーションの(最小限)高速化を利用したいと思います。したがって、計算上のオーバーヘッドがほとんどないソリューション(この場合はCSSアニメーションが依然として有利であるため)が望ましいでしょう。
しかし、計算上の負担はどうですか?このメソッドは、CSSのトランジションをjQueryアニメーションよりも速くレンダリングしますか? –
さて、CSSのトランジションを実行することで、アニメーションがハードウェアアクセラレーションになりました。そして、彼らはもっとよく見えると思います。私はこのメソッドでパフォーマンスの問題に特化していませんが、jQueryアニメーションは単に不透明度のCSSをアニメーション化するために複数のCSSを設定するだけなので、jQueryアニメーションを行うよりも優れています。よりスムーズになります。 – sic1
あなたのアニメーションがie7と8で動かない場合は、あなた(またはあなたのクライアント)が動揺しているのが良い質問でしょう。それが問題であれば、jqueryアニメーションを使うか、さらにポリフィルを調べる必要があります。トランジションイベントをサポートしていない古いブラウザを使用している場合は、トランジッションコールバックを実行するためにsetTimeoutが設定されています。 – sic1