ホバーjquery関数を変更してください

Question

以下を考慮してください： ホバー機能を使用して身長を制御するパネルがあります（div要素にする）。アニメーション化される唯一のCSSプロパティは高さです。両方のアニメーション（マウスの高さ+ 500px、マウスの高さ - = 500px）は10秒の長さです。 これは想像することができます：20秒間の時間を潰すと、マウスを「間違って」10回以上回転させることができます。

jqueryは、マウスで起こったことをすべて記憶しており、不要なアニメーションのリストを連鎖しています。

私はこれを防ぐために皆さんが必要です。

Answer 1

非常にシンプル：

1. 別々のブール変数は、アニメーションの開始時にtrueに設定する（「アニメーション」それを呼び出すことができます）を定義します。アニメーションが終了したら、falseに設定します。
2. アニメーション中に発生するイベントを無視する== true
3. （オプション）：アニメーション完了ハンドラで、マウスが監視しているトリガーの上にあるか外にあるかを確認します必要に応じて次のアニメーションを作成します。

Answer 2

アニメーションを停止するにはstop()^(docs)メソッドを使用します。

.stop(true,true)としてキューをクリアし、新しいキューを開始する前に最後までスキップします。ただし、ここで必要なことはわかりません。

not-selector^(docs)とanimated-selector^(docs)の両方を使用してis()^(docs)メソッドを使用すると、アニメーションが現在アニメーション化されていない場合のみ実行されます。

これにより、キューに蓄積ができなくなります。

if($(this).is(':not(:animated)')) { 
    // do the animation 
}