>웹 프론트엔드 >JS 튜토리얼 >jQuery 애니메이션의 연속 트리거링, 지연 및 반복 실행에 대한 솔루션_jquery

jQuery 애니메이션의 연속 트리거링, 지연 및 반복 실행에 대한 솔루션_jquery

WBOY
WBOY원래의
2016-05-16 16:17:441029검색

이 문서의 예에서는 jQuery 애니메이션의 지속적인 트리거링 및 지연 실행에 대한 솔루션을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

jQuery에서 SlideUp, SlideDown, animate 등의 애니메이션을 사용할 때 대상 요소가 외부 이벤트에 의해 구동되는 경우, 마우스가 외부 요소 이벤트를 빠르고 연속적으로 트리거하면 애니메이션이 지연되면서 반복적으로 실행되는데 이는 이상합니다.

해결책:

1. 지연 반복 실행 문제를 피하기 위해 트리거 요소의 이벤트를 지연 처리로 설정합니다(setTimeout 사용).

2. 요소의 이벤트 발생 시 모든 애니메이션을 미리 중지한 후 해당 애니메이션 이벤트를 실행합니다(stop 사용).

jquery 중지:

코드 복사 코드는 다음과 같습니다.
//문법 구조
$("#div").stop();//현재 애니메이션을 중지하고 다음 애니메이션 계속
$("#div").stop(true);//요소의 모든 애니메이션 지우기
$("#div").stop(false, true);//현재 애니메이션이 바로 종료 상태에 도달하고 다음 애니메이션을 계속하도록 합니다
$("#div").stop(true, true);//요소의 모든 애니메이션을 지우고 현재 애니메이션이 바로 종료 상태에 도달하도록 합니다

여기서는 두 번째 방법을 권장합니다:
코드 복사 코드는 다음과 같습니다.
$("#div").stop().animate({ 너비:" 100px"},100);

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.