素早く移動すると、jQuery イベントのマウスオーバーおよびマウスアウト イベントが遅延して問題が発生する

まず、コードの一部を見てみましょう:

<span style="font-family:SimHei;font-size:14px;">$(document).ready(function(){

    $("p.p1").mouseover(function()

       {$("p.p2").animate({bottom:&#39;10px&#39;},1000);})

    $("p.p1").mouseout(function()

       {$("p.p2").animate({bottom:&#39;-50px&#39;},1000);}
    )
});</span>

上記のコードは非常に単純です。hover() を使用して記述しなかったのは、コードをより明確かつ簡単にしたいためです。理解するために！これにより得られる効果は、クラス「p1」の p にマウスを置くことで、クラス「p2」の p の底の値は「10px」になります。マウスを遠ざけると、その値は「-50」ピクセルになります。これはクラス p2 を上下に移動した結果ですが、クラス p1 の p にマウスをすばやく置いて、すぐに離れることを数回繰り返すと、クラス p2 の p が表示されることがわかります。上下が止まらず、この時点でマウスの動きが非常に悪く、イベントのトリガーが遅れており、最初はそれを解決する方法を考えていました。 元のマウスオーバーの代わりに omouseenter を使用すると、初めてイベントがトリガーされた後、object エリア内で繰り返し移動してもイベントがトリガーされなくなります。その後、 :not(:animated) を使用することもできると思いました。現在のオブジェクトがアクションを実行しているかどうかを判断する preventDefault(); 結果はすべて検証され、結果が得られたものもありますが、まだ理想的ではありません。結果。 。 。 。 。 最後に、jQuery の stop() の機能は、現在実行中の

アニメーションを停止してから、上または下に移動することです。

<span style="font-family:SimHei;font-size:14px;">$(&#39;p.p1&#39;).hover(
function() {
$("p.p2").stop().animate({bottom:&#39;10px&#39;},1000);})
},
function() {
$("p.p2").stop().animate({bottom:&#39;-50px&#39;},1000);}
}
);</span>

その結果、高速移動イベントがトリガーされたときにjQueryのmouseoverイベントとmouseoutイベントのトリガーが遅れる問題が解決され、アニメーション効果が非常に親切で、素晴らしいです！

高速に移動すると、イベントは遅延してトリガーされます。

高速に移動すると、イベントは遅延してトリガーされます。

以上が素早く移動すると、jQuery イベントのマウスオーバーおよびマウスアウト イベントが遅延して問題が発生するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。