次の最終結果を達成しようとしています。ページの読み込み時に、見出し（または画像、要素など）のあるコンテンツボックスがあります。このコンテンツボックスにカーソルを合わせると、元のコンテンツがフェードアウトし、新しいコンテンツに置き換えられます。また、ボックスはアニメーションで拡大します。マウスアウトすると、コンテンツボックスは、新しいコンテンツをフェードアウトし、古いコンテンツをフェードインし、コンテンツボックスを元の高さに戻すことで、ページの読み込み時に元の状態に戻ります。
私がやったことはうまくいきますが、防弾ではありません。ボックスにカーソルを合わせてマウスアウトし、もう一度ボックスにカーソルを合わせると、ボックスが元の高さで新しいコンテンツとともに表示されます。
私はこれを行うための防弾方法を見つけ出し、IE8 + / Chrome / Safari/Firefoxで動作させるようにしています。これを完了するために私が見落としているいくつかの簡単な方法があるに違いありません、そして私はそれをするための素晴らしい方法を見つけるのにいくつかの問題を抱えています。
アニメーションが完了すると削除されるアニメーションクラスを要素に追加し、setTimeout400ミリ秒後にクラスがまだ存在するかどうかを確認するために使用しようとしましたが、IE8で動作するそのメソッドに問題がありました。
私が試すことができる他のことは本当にわかりません。誰かが何か提案があれば、私は助けに大いに感謝します。
提供されているJSFiddleは、私がやろうとしていることの基本的な考え方を提供します。私はそれを行うための防弾方法を探しています。
JSFiddle： http: //jsfiddle.net/Ur78U/1/