jQuery: how do I animate a div rotation?

Question

I can rotate a div with css, and jquery .rotate, but i don't know how to animate it.

Answer 1

Check out this jQuery patch:

http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html

Seems like it should do the trick!

Answer 2

Make use of WebkitTransform / -moz-transform: rotate(Xdeg). This will not work in IE, but Matt's zachstronaut solution doesn't work in IE either.

If you want to support IE too, you'll have to look into using a canvas like I believe Raphael does.

Here is a simply jQuery snippet that rotates the elements in a jQuery object. Rotatation can be started and stopped:

$(function() {
    var $elie = $(selectorForElementsToRotate), degree = 0, timer;
    rotate();
    function rotate() {

          // For webkit browsers: e.g. Chrome
        $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
          // For Mozilla browser: e.g. Firefox
        $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});

          // Animate rotation with a recursive call
        timer = setTimeout(function() {
            ++degree; rotate();
        },5);
    }

      // Toggle rotation on and off
    $("input").toggle(function() {
        clearTimeout(timer);
    }, function() {
        rotate();
    });
});

jsFiddle example