jQuery：スマートに素早くイベントを消化する

Question

グラフィカルなバックグラウンドdivに対してレイアウトされた3つのテキストボックスからなるjQueryコンポーネントを作成しました。各ボックスをホバリングすると、ボックスに関連する対応する背景グラフィックスが入れ替わる。アニメーションはfadeIn/fadeOutコールバックを使用して行われます（fadeInが完了するとfadeInが発生します）。

問題は、ボックス＃1からボックス＃3まで、ボックス＃2を介してマウスをすばやく通過すると、ボックス＃2に関連する画像スワップが不必要に関与し、フェードがスムーズですが、すべてのイメージスワップが完了するまでにはしばらく時間がかかることがあります。もちろん、私は素人の（不適格なWebユーザー）言葉でそれを言っています - jQueryは何が「不要」であるかを知らない。私が本当に意味することは、スマートに行動する方法があるかどうかを尋ねることです。 - 名前をつけます： - イベントをキューに入れ、新しいものが来る前に時間切れになっていないものを洗い流すか、ない。

私はイベントではあまり働いていないので、私の一般的な疑問を言い訳してください。私は実際に役立つ場合は、いくつかのサンプルコードを提供することができます。

ありがとうございました。

Answer 1

あなたのHTMLとjavascriptを提供している場合、もっと具体的にアドバイスできますが、新しいアニメーションを開始する前に.stop(true)を追加する必要があります。これにより、以前のアニメーションが停止し、アニメーションキューから削除され、次のアニメーションがすぐに開始されます。

$("whatever").fadeIn(); 

あなたはこれだろう：これに代えて例えば

、.stop(true)なければ

$("whatever").stop(true).fadeIn(); 

を次の1が前の前に開始した場合、アニメーションはキューに積み上げることができますホバートリガーされたアニメーションで簡単に実行できるようになりました。

.stop()の詳細については、jquery docを参照してください。