CSS 회전: jQuery.animate()와의 브라우저 간 호환성
브라우저 간 호환 회전을 달성하려는 시도(IE9) , jQuery의 .css() 및 .animate() 메서드를 모두 사용할 때 문제가 발생할 수 있습니다. .css()는 회전을 활성화하지만 .animate()는 회전에 실패합니다. 이 문제를 해결하기 위해 .animateRotate() 플러그인은 우아한 솔루션을 제공합니다.
jQuery.animateRotate()
.animateRotate()는 다음을 위한 사용자 친화적인 인터페이스를 제공합니다. CSS 변환에 애니메이션을 적용합니다. 허용되는 인수는 다음과 같습니다.
사용:
.animateRotate()를 활용하는 두 가지 기본 방법이 있습니다. 짧은 방법은 각도를 인수로 직접 전달하는 것입니다.
1 |
|
또는 더 많은 제어를 위해 추가 옵션과 함께 객체를 전달할 수 있습니다:
1 2 3 4 5 6 |
|
단계 함수 :
단계 기능을 사용하면 애니메이션의 각 단계에서 추가 작업을 수행할 수 있습니다. 이는 사용자 정의 전환에 특히 유용합니다.
비하인드 스토리:
.animateRotate()는 애니메이션을 사용한 CSS 변환이라는 기술을 사용합니다. 회전에 직접 애니메이션을 적용하는 대신 각도 값에 애니메이션을 적용한 다음 변환 속성에 적용합니다. 이 해결 방법을 사용하면 직접적인 CSS 변환 애니메이션을 지원하지 않는 브라우저에서 애니메이션을 사용할 수 있습니다.
위 내용은 jQuery의 .animate()를 사용하여 브라우저 간 호환 CSS 회전을 어떻게 달성할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!