jQuery_jquery의 animate() 메소드 사용 예

이 기사의 예에서는 jQuery의 animate() 메소드 사용법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

이 방법은 사용자 정의 애니메이션을 만드는 데 사용되며 애니메이션 실행 기간 및 삭제 효과를 지정할 수 있습니다. 애니메이션이 완료된 후에 콜백 함수가 트리거될 수도 있습니다.

animate() 메소드 사용법:

방법 1:

"속성 이름/값" 개체 형식으로 애니메이션 종료 스타일 속성을 정의합니다. 예:

코드 복사 코드는 다음과 같습니다.

$("div").animate({width:"1000px" })

위 코드는 div를 원래 너비에서 1000px로 조정할 수 있습니다. 한 번에 여러 "속성 이름/값" 개체 집합을 사용할 수도 있습니다. 예:

코드 복사 코드는 다음과 같습니다.

$("div").animate( {너비: "1000px" ,글꼴 크기: 20})

위 코드는 div를 원래 너비에서 1000px로, 원래 글꼴 크기를 20px로 조정할 수 있습니다. 다음 세 가지 사항에 특별한 주의를 기울여야 합니다.

1. 크기에 단위가 없는 경우 기본 단위는 px입니다.
2. 속성 값은 큰따옴표로 묶어야 합니다. 속성 값이 숫자인 경우 생략할 수 있습니다.
3. Font-szie, background-color 등의 속성은 가운데 가로선을 제거해야 하며, 두 번째 단어의 첫 글자는 대문자로 표기해야 합니다.

animate() 메서드는 애니메이션 효과의 지속 시간을 명확하게 지정할 수 있습니다. 지정하지 않으면 기본값인 Normal이 사용됩니다. 예:

코드 복사 코드는 다음과 같습니다.

$("div").animate( {너비: "1000px" ,글꼴 크기: 20},2000)

위 코드에서는 2000밀리초(2초) 후에 애니메이션 효과가 완료된다고 규정하고 있습니다.
콜백 함수는 애니메이션 실행이 완료된 후 호출할 수 있습니다. 예:

코드 복사 코드는 다음과 같습니다.

$("div").animate( {너비: "1000px" },5000 ,function(){alert("조정 완료")})

위 코드는 애니메이션이 완료된 후 콜백 함수를 트리거할 수 있으므로 프롬프트 상자가 팝업됩니다.
예제 코드:

코드 복사 코드는 다음과 같습니다.