Las transformaciones CSS no son posibles de animar con jQuery, todavía. Puedes hacer algo como esto:
function AnimateRotate(angle) {
var $elem = $('#MyDiv2');
$({deg: 0}).animate({deg: angle}, {
duration: 2000,
step: function(now) {
$elem.css({
transform: 'rotate(' + now + 'deg)'
});
}
});
}
Puede leer más sobre la devolución de llamada por pasos aquí: http://api.jquery.com/animate/#step
http://jsfiddle.net/UB2XR/23/
Y, por cierto: no necesita prefijar las transformaciones css3 con jQuery 1.7+
Actualizar
Puede envolver esto en un jQuery-plugin para hacer su vida un poco más fácil:
$.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
Actualización2
Optimicé un poco para hacer que el orden de easing, durationy completeinsignificante.
$.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);
});
};
Actualización 2.1
Gracias a matteo que notó un problema con el this-contexto en el completo- callback. Si se soluciona vinculando la devolución de llamada conjQuery.proxy en cada nodo.
He agregado la edición al código antes de la Actualización 2 .
Actualización 2.2
Esta es una posible modificación si desea hacer algo como alternar la rotación hacia adelante y hacia atrás. Simplemente agregué un parámetro de inicio a la función y reemplacé esta línea:
$({deg: start}).animate({deg: angle}, args);
Si alguien sabe cómo hacer que esto sea más genérico para todos los casos de uso, ya sea que desee establecer un grado de inicio o no, realice la edición adecuada.
El uso ... ¡es bastante simple!
Básicamente, tiene dos formas de alcanzar el resultado deseado. Pero al principio, echemos un vistazo a los argumentos:
jQuery.fn.animateRotate(angle, duration, easing, complete)
Excepto por "ángulo", todos son opcionales y recurren a las jQuery.fn.animatepropiedades predeterminadas :
duration: 400
easing: "swing"
complete: function () {}
Primero
Esta es la forma corta, pero parece un poco confusa cuantos más argumentos pasamos.
$(node).animateRotate(90);
$(node).animateRotate(90, function () {});
$(node).animateRotate(90, 1337, 'linear', function () {});
2do
Prefiero usar objetos si hay más de tres argumentos, por lo que esta sintaxis es mi favorita:
$(node).animateRotate(90, {
duration: 1337,
easing: 'linear',
complete: function () {},
step: function () {}
});