スクロールで複数の画像フェードアウト

Question

私は1ページを持ち、各ナビゲーションポイントにサイトの中央の画像がフェードして色を変えます。

私はフェードインできました：$（ "＃active3"）。fadeIn（2000）; しかし、私は再びそれをフェードアウトする問題があります。 私は説明しようとしましょう： 5つの異なる画像で5つのナビゲーションポイントがあります。 最初のナビゲーションポイントから3番目のナビゲーションポイントまでスクロールすると、すべてのナビゲーションポイント上に3枚の画像が重ねて表示されます。

私は最初から3番目のページにジャンプします何らかの形で最初の写真を撮ることができます（Z-インデックスは消えないので私にとってはうまくいかないでしょうか？）、あるいは私は2と3を消してしまいます。

私は、アクティブなナビゲーションポイントにないそれぞれの画像をフェードアウトしようとしました。たとえば、私は2番目navigaton地点にあったときのコードは次のようになります。

$("#active1").fadeOut(2000); 
$("#active2").fadeIn(2000); 
$("#active3").fadeOut(2000); 
$("#active4").fadeOut(2000); 
$("#active5").fadeOut(2000); 

しかし、それはfadeOutsキューということと同時に発生しないようです。

これが作業現場のイムです：http://palmira-lopez.de

を助けてくれてありがとう！ はまたsitenoteとして、これは、商業的なプロジェクトが、私のお母さんのためのサイト:)

Answer 1

ではありませんが、あなたが何であれ終了するjqueryのを伝えるために.finish()を使用することができますfadeOutsキュー

ようです現在キューに入れられています。

$("#active1").finish().fadeOut(2000); 
$("#active2").finish().fadeIn(2000); 
$("#active3").finish().fadeOut(2000); 
$("#active4").finish().fadeOut(2000); 
$("#active5").finish().fadeOut(2000); 

これはあなたがが望むものではないかもしれない、あなたは、プロセスに含まれていないものについて.hide()をしたいことがあります。

クラスを追加してCSSトランジションを使用する方がよい場合があります。