0

絶対に同じ場所に配置された画像のスタックがあり、表示されている画像を除くすべての画像にzIndex = -1を設定することで、一度に1つの画像しか表示できません。ページの反対側には、すべての画像名のリストがあります。特定の画像名にカーソルを合わせると、その画像がフェードインして表示され、以前に表示されていた画像がフェードアウトします。私はこのコードでこれを行います

$(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アニメーションが依然として有利であるように）ソリューションが望ましいでしょう。

4

2 に答える 2

1

z-index:-1アニメーション化して不透明度0に戻した後、適用する必要があります。そうしないと、不透明度の変化を表示せずに、下に「ポップ」するだけです。

transitionEndイベントでトリガーする必要があります。すべてのブラウザでそのイベントを正規化する方法については、このSO投稿を参照してください。

しかし、それを解決したら、基本的には、コールバックが最終的なz-indexを設定する1回限りのイベントをアタッチするだけです-次のようなものです：

visible.one('transitionEnd', function(){
    visible.css('z-index', -1);
}).css( 'opacity', 0 );

'transitionEnd'正規化されたイベントを取得するには、他のSO投稿のスクリプトを使用する必要があります。

お役に立てれば！

于 2012-05-02T23:59:36.120 に答える
0

使用animate-「箱から出して」キュー管理とコールバックサポートが付属しています

http://api.jquery.com/animate/

于 2012-05-02T23:51:21.237 に答える