CSS-Transforms vẫn chưa thể tạo hoạt ảnh với jQuery. Bạn có thể làm điều gì đó như sau:
function AnimateRotate(angle) {
var $elem = $('#MyDiv2');
$({deg: 0}).animate({deg: angle}, {
duration: 2000,
step: function(now) {
$elem.css({
transform: 'rotate(' + now + 'deg)'
});
}
});
}
Bạn có thể đọc thêm về gọi lại từng bước tại đây: http://api.jquery.com/animate/#step
http://jsfiddle.net/UB2XR/23/
Và, btw: bạn không cần phải chuyển đổi tiền tố css3 với jQuery 1.7+
Cập nhật
Bạn có thể gói nó trong một jQuery-plugin để làm cho cuộc sống của bạn dễ dàng hơn một chút:
$.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
Cập nhật2
Tôi đã tối ưu hóa nó một chút để tạo thứ tự easing, durationvà completekhông đáng kể.
$.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);
});
};
Cập nhật 2.1
Cảm ơn matteo , người đã lưu ý vấn đề với this-context trong bản hoàn chỉnh- callback. Nếu sửa nó bằng cách ràng buộc callback với jQuery.proxymỗi nút.
Tôi đã thêm phiên bản vào mã trước đây từ Bản cập nhật 2 .
Cập nhật 2.2
Đây là một sửa đổi có thể thực hiện nếu bạn muốn làm điều gì đó như chuyển đổi qua lại vòng xoay. Tôi chỉ cần thêm một tham số bắt đầu vào hàm và thay thế dòng này:
$({deg: start}).animate({deg: angle}, args);
Nếu có ai biết cách làm cho điều này chung chung hơn cho tất cả các trường hợp sử dụng, cho dù họ có muốn đặt mức độ bắt đầu hay không, vui lòng thực hiện chỉnh sửa thích hợp.
Cách sử dụng ... khá đơn giản!
Chủ yếu bạn có hai cách để đạt được kết quả mong muốn. Nhưng trước tiên, hãy xem xét các đối số:
jQuery.fn.animateRotate(angle, duration, easing, complete)
Ngoại trừ "angle", tất cả chúng đều là tùy chọn và dự phòng cho jQuery.fn.animate-properties mặc định :
duration: 400
easing: "swing"
complete: function () {}
Ngày 1
Cách này là cách ngắn gọn, nhưng có vẻ hơi không rõ ràng khi chúng ta chuyển nhiều đối số hơn.
$(node).animateRotate(90);
$(node).animateRotate(90, function () {});
$(node).animateRotate(90, 1337, 'linear', function () {});
lần 2
Tôi thích sử dụng các đối tượng nếu có nhiều hơn ba đối số, vì vậy cú pháp này là sở thích của tôi:
$(node).animateRotate(90, {
duration: 1337,
easing: 'linear',
complete: function () {},
step: function () {}
});