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/
И, кстати: вам не нужно префикс преобразований css3 с помощью jQuery 1.7+
Обновить
Вы можете обернуть это в 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
});
});
};
$('#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
Спасибо matteo, который заметил проблему с this-контекстом в полной- callback. Если это исправлено путем привязки обратного вызова jQuery.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 () {}
});