jquery에서 stop()을 사용하는 방법에 대해 이야기해 봅시다.

PHPz
풀어 주다: 2023-04-24 15:17:33
원래의
796명이 탐색했습니다.

jQuery는 강력한 JavaScript 라이브러리로서 웹 페이지에서 다양한 대화형 효과, 애니메이션 효과 등을 처리하는 데 자주 사용됩니다. 이러한 작업 중에 진행 중인 애니메이션 효과를 일시 중지하거나 중지해야 하는 경우가 있습니다. 이 경우 jQuery에서 중지 메서드를 사용할 수 있습니다.

stop 메소드 사용

jQuery에서 stop 메소드는 현재 DOM 요소에서 진행 중인 애니메이션 효과를 중지하는 데 사용됩니다. 구문은 다음과 같습니다.

$(selector).stop(stopAll, goToEnd);
로그인 후 복사

그중 selector는 중지해야 하는 DOM 요소 선택기를 나타냅니다. stopAll은 대기열의 모든 애니메이션 효과를 중지할지 여부를 나타내는 선택적 매개변수입니다. 기본값은 false이며 중지만 합니다. 활성 애니메이션, goToEnd는 현재 애니메이션의 최종 상태로 바로 이동할지 여부를 나타내는 선택적 매개변수입니다. 기본값은 애니메이션 효과를 점진적으로 중지하는 것입니다.

예를 들어 DOM 요소 $("#myElem")에서 실행 중인 애니메이션 효과를 중지해야 하는 경우 코드는 다음과 같습니다.

$("#myElem").stop();
로그인 후 복사

이 코드에서 중지 메소드는 실행 중인 애니메이션 효과를 직접 중지합니다. 현재 애니메이션 효과가 끝난 후에는 다른 애니메이션 효과가 수행되지 않습니다.

요소의 모든 대기열에서 애니메이션 효과를 중지해야 하는 경우 코드는 다음과 같습니다.

$("#myElem").stop(true);
로그인 후 복사

이 코드에서 stop 메소드의 stopAll 매개변수는 true로 설정됩니다. 현재 요소의 모든 대기열.

큐의 모든 애니메이션 효과를 중지하고 최종 상태로 직접 점프해야 하는 경우 코드는 다음과 같습니다.

$("#myElem").stop(true, true);
로그인 후 복사

이 코드에서 중지 메소드의 goToEnd 매개변수는 true로 설정됩니다. 즉, 중지한다는 의미입니다. 대기열의 모든 애니메이션 효과를 확인하고 최종 상태로 직접 이동합니다.

정지 방법의 고급 사용법

정지 방법을 적용하여 요소에 대한 여러 애니메이션 효과를 처리할 수도 있습니다. 이 경우 stop 메소드의 내부 구현은 위의 사용법과 약간 다릅니다. DOM 요소에서 여러 애니메이션 효과가 동시에 수행되는 경우 다음 코드를 사용하여 애니메이션 효과 중 하나를 중지하는 것을 고려할 수 있습니다.

$("#myElem").stop("propertyName");
로그인 후 복사

이 코드에서 propertyName은 중지해야 하는 애니메이션 효과의 이름을 나타냅니다. , 다음을 포함할 수 있습니다.

  • "queueName": 대기열의 모든 애니메이션 효과를 중지합니다.
  • "fx": 현재(jQuery.fx) 개체의 모든 애니메이션 효과를 중지합니다.
  • "불투명도", "너비", "높이" 등과 같이 애니메이션 효과를 정의하는 데 사용되는 이름입니다.

따라서 특정 요소에 대한 모든 애니메이션 효과를 동시에 중지해야 하는 경우 코드는 다음과 같습니다.

$(".myElems").stop(false, true);
로그인 후 복사

이 코드에서 중지 메서드가 호출되지 않을 때의 기본 동작은 현재 요소만 중지하는 것입니다. 활성 애니메이션 효과를 사용하고 stopAll 매개변수를 true로 설정하여 해당 요소에 대한 모든 애니메이션 효과를 중지합니다.

결론

이 글의 도입부를 통해 우리는 jQuery의 stop 메소드의 기본 사용법과 일부 고급 사용법의 구현을 배웠습니다. 애니메이션 효과를 처리하는 동안 중지하거나 일시 중지해야 하는 일부 효과에 대해 중지 방법을 사용하는 것이 매우 편리하고 효율적입니다. 그러나 stop 메서드를 사용할 때는 올바른 매개변수를 사용하도록 주의해야 합니다. 그렇지 않으면 전체 애니메이션 효과의 작동에 영향을 미치게 됩니다.

위 내용은 jquery에서 stop()을 사용하는 방법에 대해 이야기해 봅시다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿