CSS-Transforms are not possible to animate with jQuery, yet. You can do something like this:
function AnimateRotate(angle) { // caching the object for performance reasons var $elem = $('#MyDiv2'); // we use a pseudo object for the animation // (starts from `0` to `angle`), you can name it as you want $({deg: 0}).animate({deg: angle}, { duration: 2000, step: function(now) { // in the step-callback (that is fired each step of the animation), // you can use the `now` paramter which contains the current // animation-position (`0` up to `angle`) $elem.css({ transform: 'rotate(' + now + 'deg)' }); } }); }
You can read more about the step-callback here: http://api.jquery.com/animate/#step
And, btw: you don’t need to prefix css3 transforms with jQuery 1.7+
Update
You can wrap this in a jQuery-plugin to make your life a bit easier:
$.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
Update2
I optimized it a bit to make the order of easing
, duration
and complete
insignificant.
$.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); }); };
Update 2.1
Thanks to matteo who noted an issue with the this
-context in the complete-callback
. If fixed it by binding the callback with jQuery.proxy
on each node.
I’ve added the edition to the code before from Update 2.
Update 2.2
This is a possible modification if you want to do something like toggle the rotation back and forth. I simply added a start parameter to the function and replaced this line:
$({deg: start}).animate({deg: angle}, args);
If anyone knows how to make this more generic for all use cases, whether or not they want to set a start degree, please make the appropriate edit.
The Usage…is quite simple!
Mainly you’ve two ways to reach the desired result. But at the first, let’s take a look on the arguments:
jQuery.fn.animateRotate(angle, duration, easing, complete)
Except of “angle” are all of them optional and fallback to the default jQuery.fn.animate
-properties:
duration: 400 easing: "swing" complete: function () {}
1st
This way is the short one, but looks a bit unclear the more arguments we pass in.
$(node).animateRotate(90); $(node).animateRotate(90, function () {}); $(node).animateRotate(90, 1337, 'linear', function () {});
2nd
I prefer to use objects if there are more than three arguments, so this syntax is my favorit:
$(node).animateRotate(90, { duration: 1337, easing: 'linear', complete: function () {}, step: function () {} });