> 웹 프론트엔드 > CSS 튜토리얼 > jQuery의 .animate()를 사용하여 브라우저 간 호환 CSS 회전을 어떻게 달성할 수 있습니까?

jQuery의 .animate()를 사용하여 브라우저 간 호환 CSS 회전을 어떻게 달성할 수 있습니까?

Linda Hamilton
풀어 주다: 2024-12-09 03:08:10
원래의
215명이 탐색했습니다.

How Can I Achieve Cross-Browser Compatible CSS Rotation with jQuery's .animate()?

CSS 회전: jQuery.animate()와의 브라우저 간 호환성

브라우저 간 호환 회전을 달성하려는 시도(IE9) , jQuery의 .css() 및 .animate() 메서드를 모두 사용할 때 문제가 발생할 수 있습니다. .css()는 회전을 활성화하지만 .animate()는 회전에 실패합니다. 이 문제를 해결하기 위해 .animateRotate() 플러그인은 우아한 솔루션을 제공합니다.

jQuery.animateRotate()

.animateRotate()는 다음을 위한 사용자 친화적인 인터페이스를 제공합니다. CSS 변환에 애니메이션을 적용합니다. 허용되는 인수는 다음과 같습니다.

  • angle: 회전 각도를 도 단위로 지정합니다.
  • duration: 애니메이션 지속 시간을 정의합니다. 기본값은 400 milliseconds.
  • easing: 애니메이션의 여유 기능을 결정하며 기본값은 "swing"입니다.
  • complete: 다음과 같이 실행되는 선택적 콜백 함수입니다.

사용:

.animateRotate()를 활용하는 두 가지 기본 방법이 있습니다. 짧은 방법은 각도를 인수로 직접 전달하는 것입니다.

1

$(node).animateRotate(90);

로그인 후 복사

또는 더 많은 제어를 위해 추가 옵션과 함께 객체를 전달할 수 있습니다:

1

2

3

4

5

6

$(node).animateRotate(90, {

  duration: 1337,

  easing: 'linear',

  complete: function () {},

  step: function () {}

});

로그인 후 복사

단계 함수 :

단계 기능을 사용하면 애니메이션의 각 단계에서 추가 작업을 수행할 수 있습니다. 이는 사용자 정의 전환에 특히 유용합니다.

비하인드 스토리:

.animateRotate()는 애니메이션을 사용한 CSS 변환이라는 기술을 사용합니다. 회전에 직접 애니메이션을 적용하는 대신 각도 값에 애니메이션을 적용한 다음 변환 속성에 적용합니다. 이 해결 방법을 사용하면 직접적인 CSS 변환 애니메이션을 지원하지 않는 브라우저에서 애니메이션을 사용할 수 있습니다.

위 내용은 jQuery의 .animate()를 사용하여 브라우저 간 호환 CSS 회전을 어떻게 달성할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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