CSS 변환은 아직 jQuery로 애니메이션 할 수 없습니다. 다음과 같이 할 수 있습니다.
function AnimateRotate(angle) {
var $elem = $('#MyDiv2');
$({deg: 0}).animate({deg: angle}, {
duration: 2000,
step: function(now) {
$elem.css({
transform: 'rotate(' + now + 'deg)'
});
}
});
}
단계 콜백에 대한 자세한 내용은 http://api.jquery.com/animate/#step에서 확인할 수 있습니다.
http://jsfiddle.net/UB2XR/23/
그리고 btw : jQuery 1.7+를 사용하여 css3 변환을 접두사로 지정할 필요가 없습니다.
최신 정보
이것을 jQuery-plugin으로 감싸서 삶을 좀 더 쉽게 만들 수 있습니다.
$.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
});
});
};
$('#MyDiv2').animateRotate(90);
http://jsbin.com/ofagog/2/edit
업데이트 2
나는 순서를 easing, duration그리고 complete중요하지 않게 만들기 위해 약간 최적화했습니다 .
$.fn.animateRotate = function(angle, duration, easing, complete) {
var args = $.speed(duration, easing, complete);
var step = args.step;
return this.each(function(i, e) {
args.complete = $.proxy(args.complete, e);
args.step = function(now) {
$.style(e, 'transform', 'rotate(' + now + 'deg)');
if (step) return step.apply(e, arguments);
};
$({deg: 0}).animate({deg: angle}, args);
});
};
2.1 업데이트
전체 에서 -context 관련 문제를 지적한 matteo 에게 감사드립니다 . 콜백 을 각 노드에 바인딩 하여 수정 한 경우 .thiscallbackjQuery.proxy
업데이트 2 에서 이전에 코드에 에디션을 추가했습니다 .
2.2 업데이트
이것은 회전을 앞뒤로 토글하는 것과 같은 작업을 수행하려는 경우 가능한 수정입니다. 함수에 시작 매개 변수를 추가하고 다음 줄을 바꿨습니다.
$({deg: start}).animate({deg: angle}, args);
시작 정도를 설정하든 원하지 않든 모든 사용 사례에 대해 이것을 더 일반적으로 만드는 방법을 아는 사람이 있으면 적절하게 편집하십시오.
사용법 은 아주 간단합니다!
주로 원하는 결과에 도달하는 두 가지 방법이 있습니다. 하지만 먼저 인수를 살펴 보겠습니다.
jQuery.fn.animateRotate(angle, duration, easing, complete)
"각도"를 제외하고 모두 선택 사항이며 기본 jQuery.fn.animate속성 으로 대체됩니다 .
duration: 400
easing: "swing"
complete: function () {}
1 위
이 방법은 짧은 방법이지만 더 많은 인수를 전달할수록 약간 불분명 해 보입니다.
$(node).animateRotate(90);
$(node).animateRotate(90, function () {});
$(node).animateRotate(90, 1337, 'linear', function () {});
2 차
세 개 이상의 인수가있는 경우 객체를 사용하는 것을 선호하므로이 구문이 가장 좋습니다.
$(node).animateRotate(90, {
duration: 1337,
easing: 'linear',
complete: function () {},
step: function () {}
});