特定の状況でのみ遅延遷移

Question

コンテナ内に4つのオーバーレイ（overflow: hidden）がデフォルトで水平方向に100％変換されています。 .active（.overlay）に表示されます。 別のものをアクティブにすると、現在のものから.activeが削除され、新しいものに.activeが追加されます。

古いオーバレイと新しいオーバレイの両方を一度にアニメートすると、一貫性のないビジュアル（オーバーレイされたオーバーレイなど）が発生するため、「新しいアクティブ」要素にトランジション遅延が必要です。同時に両方のアニメーション化はあまりにも急いでいると感じます。

私の最初のアプローチ： 兄弟セレクタ兄弟セレクタは、「背後」に見えるか、「周り」がないので、うまくいかなかった、.activeのすべての兄弟の移行を遅らせる...

2番目のアプローチ： クラスのクラスatLeastOneIsActiveに移動し、.activeにトランジション遅延を適用します。新しいオーバーレイと古いオーバーレイの両方が遷移遅延を起こし、すべてがさらに悪化するため、うまくいきませんでした。

残念ながら、私はあなたにライブの例を示すことはできません。 質問は、とにかくより一般的です。しかし、ここ2つのスクリーンショット

hover on either pin or link

overlay displayed

の結果の画像を取得するために、私は特定の状況で遅延を適用するために、清潔で甘い方法を探しています。 jQueryはクラス管理にのみ使用されます。

Answer 1

別のものをアクティブにすると、現在のものから.activeが削除され、新しいものに.activeが追加されます。

この「アクティベーション」はjQueryで行われますか.on("mouseover", function(){？
このようにクラスを追加したり削除したりすると、にsetTimeoutを単に使用しないでください。

-------------------------
EDIT

私はしばらくの間それに取り組みました。
そして、私は確かに解決策を持っていると確信しています...

私は正確なあなたの具体的な問題の正確な性質を発見したとしましょう。

私はあなたの問題と解決策をフィドルで再現しました。
しかし、あなたがそれを見て前に、私の説明をお読みください：

画像のトランジションは重なっています。
これは、アニメーションの開始位置に対する幅のためです。 特定の距離でビューポートの右端にプッシュされているので...

この距離は画像と比較して十分ではありません。それは（最小）の2倍でなければなりません。
すべてを同じサイズに設定すると見つかりました。
これは必須ではありません...しかし、確かに良いことです！

したがって、解決策は、ビューポートの右側からこの「最大幅」の2倍を押し込むことです。

私はフィドルを作り、画像をアニメーション化する4つのボタン（マップピンを表す）を作った。キーボード番号も割り当てられているので、ボタンをマウスでターゲットにすることなく、画像を注意深く見るのが簡単です。 ;）

最後に、イメージをすべて同じサイズにするボタン「Toggle class equalSize」があります。

Have a look now!
：D

特異性の私の不足のため申し訳ありません

.active { 
    right:0; 
} 
img{ 
    position:fixed; 
    right:-1200px; 
    top:100px; 
    transition: right 2s; 
} 
.equalSize{ 
    width:600px; 
    height:450px; 
}