빠르게 이동할 때 jQuery 이벤트 마우스오버 및 마우스아웃 이벤트 지연으로 인해 문제가 발생함

黄舟

풀어 주다： 2017-06-28 11:16:37

원래의

2669명이 탐색했습니다.

먼저 코드를 살펴보겠습니다.

<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"px이 됩니다. p2 클래스를 위아래로 이동하는 효과인데, p1 클래스가 있는 p에 빠르게 마우스를 올려놓고 빠르게 멀어지는 것을 여러 번 반복하면 p가 p2 클래스와 함께 있는 것을 알 수 있습니다. 거기에서 멈추지 않습니다. 이때 마우스가 움직이지 않습니다. 이 효과가 매우 좋지 않아 이벤트 가 트리거되고 처음에는 어떻게 해결해야할지 고민했습니다. 원래 마우스 오버 대신 omouseenter를 사용하면 이벤트가 처음으로 트리거된 후 object 영역에서 반복적인 움직임이 더 이상 트리거되지 않습니다. 그런 다음 :not(:animated)를 사용할 수도 있다고 생각했습니다. 현재 객체가 액션을 실행하고 있는지 판단해 preventDefault( ); 결과를 하나씩 검증하고 구현한 것도 있고, 아직 결과가 이상적이지 않은 것도 있습니다. 결과. . . . . 마지막으로 jQuery의 stop()이 생각났습니다. 그 기능은 현재 실행 중인

animation

을 중지하고 위 또는 아래로 이동한 후 다음 코드를 작성하는 것입니다.

<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의 마우스 오버 및 마우스 아웃 이벤트가 지연 트리거되는 문제를 해결했으며 애니메이션 효과도 매우 친숙해서 좋습니다!

빠르게 움직이면 이벤트가 지연되어 발생합니다.