jquery 이벤트 hover, mouseenter 및 mouseleave는 애니메이션을 한 번만 트리거합니다.

jquery hover mouseenter mouseleave 이벤트는 한 번만 트리거됩니다.animation

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

마우스를 특정 div로 이동하고, mouseenter 이벤트 및 애니메이션을 트리거하고, 밖으로 이동하여 mouseleave 이벤트 및 애니메이션을 트리거하지만 마우스를 뒤로 이동할 때 애니메이션이 여러 번 반복되어야 합니다. 애니메이션이 실행되는 동안 즉, 마우스가 애니메이션을 통과한 후 mouseenter 및 mouseleave 이벤트가 어떻게 트리거되지 않을 수 있습니까? div의 경우 애니메이션이 다시 나타나지 않습니다. 애니메이션이 완료된 후에만 애니메이션이 반복됩니다.

stop 메소드를 사용할 수 있습니다:

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

stop()의 첫 번째 매개변수가 true이면 현재 애니메이션 queue을 즉시 지우는 것을 의미하며 기본값은 fx입니다. 두 번째 매개변수가 true이면 현재 실행 중인 애니메이션이 즉시 종료 상태로 설정됨을 나타냅니다.

애니메이션 실행 전 판단:

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

선택한 요소가 애니메이션 상태가 아닌 경우 애니메이션이 실행됩니다. 그렇지 않으면 무시하세요

^_^ (이전에 명확하게 답변된 질문에 직면했다는 표현)

이것을 @Humphry가 "애니메이션 원자성 문제"라고 부릅니다. 즉, 애니메이션 작업이 비재진입 원자 프로세스인 경우 코드에서 이 기능을 구현하는 방법입니다.

여기에서 매우 명확한 답변을 찾을 수 있습니다. 대답은 분명한 마킹 방법입니다. 애니메이션할 요소를 정렬하고, 애니메이션이 시작될 때 마크를 설정하고, 끝날 때 제거합니다(콜백 함수 사용). 로고가 있는 경우 애니메이션을 시작하는 이벤트가 발생하면 안 됩니다.

위 내용은 jquery 이벤트 hover, mouseenter 및 mouseleave는 애니메이션을 한 번만 트리거합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!