jquery - すでにアニメートしている場合はアニメートしないでください

Question

怒って。私はこれを機能させた後、バックアップなしでコードを愚かに上書きしましたが、今ではそれをどのように行ったか思い出せません！

私はドロップダウンソーシャルイエティを持っています：http：//projects.jonhudsonweb.com/work

ただし、マウスを繰り返し実行すると、アニメーションが何度も繰り返されます。これを止めるための私の失敗した努力は次のとおりです。

$('#social-yeti').not(':animated').hoverIntent(function(){
    $(this).delay(300).animate({top:"+=203"}, 1000)
    }, function(){
    $(this).delay(300).animate({top:"-=203"}, 1000)
    } 
);

これが私が以前にやった方法だと確信しています！どんな助けでも大歓迎です！

Answer 1

アニメーション化する前に、 .stop（）メソッドを配置してみてください。

$('#social-yeti').hover(function() {
    $(this).stop(true, true).animate({ top:"0" }, 1000);
}, function() {
    $(this).stop(true, true).animate({ top:"-203" }, 1000);
});

これにより、基本的に、新しいアニメーションを開始する前に、要素のアニメーションキューがクリアされます。

編集 - - -

以前の問題は、アニメーションの途中で現在の最高値に値を追加していたことです（+ = 203）。奇妙なジャンプを避けるために、値を加算/減算する代わりに、特定の「トップ」値にアニメーション化するように変更しました。今すぐコードを試してください。

最初の.stopパラメーターはキューをクリアするかどうかを示し、2番目のパラメーターは現在のアニメーションの最後にジャンプする必要があることを示します。必要に応じて自由に変更してください。

Answer 2

ブール変数を設定する必要があります。それanimatingを呼び出しましょう。false.

マウスをホバーしたときに、アニメーションを開始する前に、animatingfalseかどうか、アニメーションが開始されているかどうかを確認し、その値をに変更しますtrue。

それ以外の場合は、何もしません。

アニメーションが完了したら、（コールバック関数を使用して）animating値をに戻しfalseます。

Answer 3

使用.stop()：

$(this).stop().delay(300).animate({top:"+=203"}, 1000)