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

jquery hover、mouseenter、mouseleave イベントは 1 回だけトリガーされますanimation

jquery.mouseenter(function(){
    $(div).animate({'margin-top':'100px'},1000)
})
jquery.mouseleave(function(){
    $(div).animate({'margin-top':'200px'},1000)
})

マウスを特定の div に移動し、mouseenter イベントとアニメーションをトリガーし、外に移動して Mouseleave イベントとアニメーションをトリガーしますが、マウスを元に戻すとdiv を越えて、イベントがトリガーされます。アニメーションを数回繰り返す必要があります。アニメーションの実行中、つまりマウスが上を通過した後に、mouseenter イベントと Mouseleave イベントがトリガーされないようにするにはどうすればよいでしょうか。 div の場合、アニメーションは再表示されません。アニメーションが完了した場合にのみ、アニメーションが繰り返されます。

stop メソッドを使用できます。 stop() の最初のパラメーターが true の場合、アニメーションは繰り返されます。現在のアニメーション

queue

を直ちにクリアすることを意味し、2 番目のパラメーターが true の場合、デフォルトは fx で、現在実行中のアニメーションが直ちに終了状態に設定されることを示します。
アニメーション実行前の判断:

$(div).stop(false, true).animate({'margin-top':'100px'},1000);

選択した要素がアニメーション状態にない場合、アニメーションが実行されます。それ以外の場合は無視してください

^_^ (以前に明確に答えられた質問に遭遇したことを表す表現)

これは @Humphry によって「アニメーションの原子性問題」と呼ばれています。つまり、アニメーション アクションが非リエントラントのアトミック プロセスである場合、この機能をコードに実装する方法です。

非常に明確な答えはここにあります。答えは明らかなマーキング方法です。アニメーション化する要素を位置合わせし、アニメーションの開始時にマークを設定し、終了時にマークを削除します (

コールバック関数

を使用)。マークがある場合、アニメーションを開始するイベントをトリガーしてはなりません。

以上がjqueryイベントのhover、mouseenter、mouseleaveはアニメーションを1回だけトリガーしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。