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

Solution 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.

Solution 2

The simplest I feel is this example on jsfiddle

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

        $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});  
        $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
        $elie.css('transform','rotate('+degree+'deg)');                      
        timer = setTimeout(function() {
            ++degree; rotate();
        },5);
    }

    $("input").toggle(function() {
        clearTimeout(timer);
    }, function() {
        rotate();
    });
}); 

http://jsfiddle.net/eaQRx/

Solution 3

QTransform allows you to rotate, skew, scale and translate and it works cross browser.

Download and inlcude the QTransform.js to your html.

<script src="js/qTransform.js"></script>

Provide a fixed height-width to your div(s) and add the following script:

$('#box4').delay(300).animate({rotate: '20deg'}, 500);
$('#box5').delay(700).animate({rotate: '50deg'}, 500);
$('#box6').delay(1200).animate({rotate: '80deg'}, 500);

where (box4, box5 & box6 are my div id's).

The delay(300), delay(700) & delay(1200) starts the animation after 300, 500 and 1200 milliseconds. And the 500 at the end is the duration for the animation.

If you want to manually provide the rotation angle you can do like this:

Take the angle in variable. e.g.

var degAngle = 60;

and add it to the script like

$('#box4').delay(300).animate({rotate: degAngle+'deg'}, 500);

You can also provide the multiple effects like scale along with rotation. E.g.,

$('#box4').delay(300).animate({scale: '1.5', rotate: '20deg'}, 500);

Why QTransform?

Till date jQuery doesn't support CSS3 animations. This plugin can help you to accomplish your target.

Hope this works for you.

Solution 4

This solution uses CSS3, JQuery and HTML5 data attributes. It allows you to rotate repeatedly in the same direction using CSS3 easing. Other CSS3 solutions usually rotate one way and then back the other. Rotating one way only (clockwise for example) is useful for something like a refresh or loading button.

<style>
    .rotate{
        -moz-transition: all 0.2s ease;
        -webkit-transition: all 0.2s ease;
        transition: all 0.2s ease;
    }
</style>

<div class="rotate" style="width: 100px; height: 100px; background-color: red;"></div>

<script>
    $(".rotate").click(function(){
        var rotate = 180;
        var elem = $(this);

        //get the current degree
        var currentDegree = 0;
        if(typeof(elem.attr('data-degree')) != 'undefined') {
            currentDegree += parseInt(elem.attr('data-degree'), 10);
        }

        //calculate the new degree
        var newDegree = currentDegree + rotate;

        //modify the elem css
        elem.css({ WebkitTransform: 'rotate(' + newDegree + 'deg)'});  
        elem.css({ '-moz-transform': 'rotate(' + newDegree + 'deg)'});
        elem.css('transform','rotate(' + newDegree + 'deg)');

        //store the degree for next time
        elem.attr('data-degree', newDegree);
    });
</script>

Note: I store the current degree in a data attribute to avoid having to parse the transition matrix.

View more solutions