jQuery：別のCSS属性を変更する前にCSSのアニメーションが完了するまで待ちます

Question

画像のスタックを同じ場所に置いていますが、zIndex = -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アニメーションが依然として有利であるため）が望ましいでしょう。

Answer 1

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

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

しかし、あなたは、最後のZインデックスを設定するコールバックとその基本的に1つだけオフに添付イベントをこれをうまく一度 - このような何か：あなたは他のスクリプトを使用する必要が

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

あなたの正規化'transitionEnd'イベントを取得するために投稿してください。

希望すると便利です。

Answer 2

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