Question

Possible Duplicate:
jQuery: how do I animate a div rotation?

I have a div which I want to smoothly rotate around a center point by 30 degrees when you click it. I’ve searched a bunch but haven’t found anything that I could get to work. Here’s what I’ve tried so far – I can’t for the life of me figure out what I’m doing wrong.

$("#box").click(function() {
    $(this).animate({
        rotate: '30deg'
    }, 1000);
});​

And here’s an example: jsFiddle

This seems stupidly simple and I’ll probably get eaten alive for even asking, but I am seriously stuck on this. Thanks for any help.

Answer 1

Use the jQuery Rotate plugin – it’s reasonably cross-browser.

$("#box").rotate({ 
    angle:0,
        bind: {
            click : function(){
                var curAngle = parseInt($(this).getRotateAngle());
                $(this).rotate({
                    angle: curAngle,
                    animateTo: curAngle + 30
                });
            }
        }
   });

​
DEMO: http://jsfiddle.net/svz2J/6/

As requested in the comments below – a way to do this via a button.
Also, added a duration example.

$("button").click(function(){ 
    var curAngle = parseInt($("#box").getRotateAngle()) || 0;
    $("#box").rotate({
        angle: curAngle,
        animateTo: curAngle + 30,
        duration: 5000
    });
});

​

DEMO: http://jsfiddle.net/svz2J/10/