크로스 브라우저 CSS 회전에 jQuery.animate()를 어떻게 사용할 수 있나요?

jQuery Animate()를 사용한 브라우저 간 CSS 회전

소개

CSS 회전이 효과적으로 작동하려면 브라우저 간 호환성이 필요합니다. 이 문서의 목표는 문제를 탐색하고 jQuery.animate()를 사용하여 회전을 달성하기 위한 솔루션을 제공함으로써 이 문제를 해결하는 것입니다.

jQuery 회전 문제

제공된 코드 조각은 CSS 변환이 jQuery와 호환되지 않는 방식을 보여줍니다. .생기 있게 하다(). css()는 요소를 성공적으로 회전할 수 있지만 animate()는 회전에 실패합니다.

해결책

해결책에는 애니메이션 내에서 단계 콜백을 활용하는 것이 포함됩니다. 이 콜백은 현재 애니메이션 위치에 대한 액세스를 제공하므로 CSS를 사용하여 회전 변환을 수동으로 적용할 수 있습니다. 수정된 코드는 다음과 같습니다.

function AnimateRotate(angle) {
    // Get the jQuery object for better performance
    var $elem = $('#MyDiv2');
    // Use a pseudo object for animation, starting from `0` to `angle`
    $({ deg: 0 }).animate({ deg: angle }, {
        duration: 2000,
        step: function(now) {
            // Set the rotation using the CSS transform property
            $elem.css({
                transform: 'rotate(' + now + 'deg)'
            });
        }
    });
}

편의성을 위한 jQuery 플러그인

사용을 단순화하기 위해 jQuery 플러그인을 생성할 수 있습니다.

$.fn.animateRotate = function(angle, duration, easing, complete) {
    return this.each(function() {
        var $elem = $(this);

        $({ deg: 0 }).animate({ deg: angle }, {
            duration: duration,
            easing: easing,
            step: function(now) {
                $elem.css({
                   transform: 'rotate(' + now + 'deg)'
                });
            },
            complete: complete || $.noop
        });
    });
};

고급 기능

최적화된 순서 인수:

플러그인의 업데이트된 버전은 각도, 기간, 여유, 완료 등 최적화된 인수 순서를 지원합니다.

토글 기능:

회전을 앞뒤로 전환해야 하는 시나리오의 경우 시작 매개변수를 기능에 추가하여 더 많은 작업을 수행할 수 있습니다. 유연성.

결론:

제공된 솔루션은 jQuery.animate()를 사용하여 요소 회전 문제를 효과적으로 해결합니다. 단계 콜백을 활용하고 jQuery 플러그인을 생성함으로써 개발자는 CSS 회전에 대한 브라우저 간 호환성을 쉽게 달성할 수 있습니다.

위 내용은 크로스 브라우저 CSS 회전에 jQuery.animate()를 어떻게 사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!