I can rotate a div with css, and jquery .rotate, but i don\'t know how to animate it.
I needed to rotate an object but have a call back function. Inspired by John Kern's answer I created this.
function animateRotate (object,fromDeg,toDeg,duration,callback){
var dummy = $('')
$(dummy).animate({
"margin-left":toDeg+"px"
},
{
duration:duration,
step: function(now,fx){
$(object).css('transform','rotate(' + now + 'deg)');
if(now == toDeg){
if(typeof callback == "function"){
callback();
}
}
}
}
)};
Doing this you can simply call the rotate on the object like so... (in my case I'm doing it on a disclosure triangle icon that has already been rotated by default to 270 degress and I'm rotating it another 90 degrees to 360 degrees at 1000 milliseconds. The final argument is the callback after the animation has finished.
animateRotate($(".disclosure_icon"),270,360,1000,function(){
alert('finished rotate');
});