jquery hoverイベントはアニメーションを1回だけトリガーします

最近、仕事中にアニメーションに関する質問がありました.

$("div").hover(
    function() {
        $(this).animate({"margin-top":"100px"},1000);
    }, function() {
        $(this).animate({"margin-top":"200px"},1000);
    });

コードを見るのは簡単なマウスが滑ったアニメーションですが、私がテストしたとき、私が神経のようにスライドしている間に、イベントは何度もトリガーされ、アニメーションも何度も繰り返して、どのように繰り返して現れないことができますか?つまり、アニメーションの過程で、マウスがこのdivを滑って、このイベントをトリガーしませんか?
疑問を持ってgoogleの
エレメントにhoverイベントをバインドした後、カーソルが移動する速度が速すぎて、移動したアニメーションがまだ実行されていないため、カーソルを移動すると、移動したアニメーション効果はキューに配置され、移動したアニメーションが完了した後に実行されることが分かった.このため、カーソルの移動速度が速すぎると、移動カーソルとアニメーション効果が一致せず、繰り返される場合があります.
解決策は2つあります.
1、jqのstopメソッドを使用できます.$(div).stop(false, true).animate({'margin-top':'100px'},1000); stop()の最初のパラメータがtrueである場合、現在のアニメーションキューが直ちにクリアされることを示し、デフォルトはfxである.2番目のパラメータがtrueの場合は、現在実行中のアニメーションをすぐに終了状態にします.
延長:(jqのapiを本当によく見なければならないようです)
要素を停止するアニメーション:stop([cleanQueue,gotoEnd]):最初のパラメータは、実行中のアニメーションを最後の状態に直接ジャンプするかどうかを表します.(デフォルト)
(1)パラメータなしstop():現在のアニメーションを直ちに停止し、次にアニメーションがある場合は現在の状態で次のアニメーションを開始します.
(2)stop(false,true):現在のアニメーションは直接終了状態に達します.
(3)stop(true,true):現在のアニメーションが直接終了状態に達し、現在のオブジェクトのアニメーションキューが空になります.
注意:jQueryは実行中のアニメーションの最終状態のみを設定でき、直接アニメーションを実行していない最終状態に達することはできません.
2、動画を実行する前に判断する:

if (!$(obj).is(':animated')) {
    // to do something
}