css - jquery animate a rotating div

Question

I would like to rotate a div in an animate function such as

 $('div').animate({rotate: '30deg'},1000);

I have found this:

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

But I want to know if there is a more official way to do it or at least a different way.

Thanks

Answer 1

If you're open to using CSS3 in combination with jQuery, perhaps this method may be of some use to you:

HTML

<div id="click-me">Rotate</div>

<div id="rotate-box"></div>

CSS

#rotate-box{

   width:50px;
   height:50px;
   background:#222222;

}

@-moz-keyframes rotatebox /*--for firefox--*/{

    from{
        -moz-transform:rotate(0deg);
    }       
    to{
        -moz-transform:rotate(360deg);
    }                       

}

@-webkit-keyframes rotatebox /*--for webkit--*/{

    from{
        -webkit-transform:rotate(0deg);
    }       
    to{
        -webkit-transform:rotate(360deg);
    }                       

}

#click-me{
   font-size:12px;
   cursor:pointer;
   padding:5px;
   background:#888888;
}

And assuming that the element in question is supposed to rotate upon a click of a link/div/button, your jQuery will look something like this:

jQuery

$(document).ready(function(){
    $('#click-me').click(function(){
        $('#rotate-box').css({

        //for firefox
        "-moz-animation-name":"rotatebox",
        "-moz-animation-duration":"0.8s",
        "-moz-animation-iteration-count":"1",
            "-moz-animation-fill-mode":"forwards",

        //for safari & chrome
        "-webkit-animation-name":"rotatebox",
        "-webkit-animation-duration":"0.8s",
        "-webkit-animation-iteration-count":"1",
        "-webkit-animation-fill-mode" : "forwards",

        });
    });
});

So since jQuery has yet to be able to support rotate(deg) in .animate(), I've kinda cheated by pre-defining the animation key frames in CSS3 and assigning a label or identifier to that particular animation. In this example, that label/identifier is defined as rotatebox.

What happens from here on is that the moment the clickable div is clicked upon, the jQuery snippet will utilize .css() and assign the necessary properties into the rotatable element. The moment those properties are assigned, there will be a bridge from the element to the CSS3 animation keyframes, thereby allowing for the animation to execute. You can also control the speed of the animation by altering the animation-duration property.

I personally think that this method is only necessary if click or mouse scroll events are required to activate the rotate. If the rotate is supposed to be running immediately upon document load, then using CSS3 alone will suffice. The same applies to if a hover event is supposed to activate the rotate - you simply define the CSS3 animation properties that links the element to the rotating animation in the element's pseudo classes.

My method here is simply based on the assumption that a click event is required to activate the rotate or that jQuery is somehow required to play a part in this. I understand that this method is pretty tedious so if anyone has a input, feel free to suggest. Do note also that as this method involves CSS3, it will not work as it should on IE8 and below.