Most animation on web pages are developed by Flash. Actually this is also very simple and easy to do interesting animation with jQuery. This jQuery tutorial shows how to do a rotation loop animation.

Watch jQuery Rotation Animation video tutorial on YouTube:

jQuery rotate() Function

A jQuery rotate plugin is available on the Internet to download for free. Once the rotate plugin is include in the HTML header of web page, the rotate() function can be called.

Example using jQuery rotate function:



// Degree of angle to rotate
var myAngle = 10;

// Rotate the selected element
$("#mill").rotate(myAngle);

Result:

When the above jQuery codes are executed, the selected element (Mill Blade) will rotate by 10 degree. This is shown in the diagram below:

jQuery Loop Animation with setInterval() Function

The above jQuery example will only rotate the selected element for one time. In order to do a loop or continous rotation animation, we need to execute the rotate() function continously.

Luckily we can run the rotate() function continously in a set interval by using the JavaScript setInterval() function.

setInterval allows to call a function to execute in a set time delay in milli-seconds. The following diagram shows how to use setInterval to call a function.

How the jQuery Works:

In every 10 milliseconds, the rotateObject function will be called, thus the selected element (mill blade) will be rotate by one degree. Hence the selected element will be rotate by one degree in every 0.01 seconds, thus forming the loop animation effect. This can be shown in the diagram below:

jQuery Rotation Animation with Firefox and IE6

In above jQuery rotation animation tutorial, the animation works fine in Firefox but not in IE6. It seems that rotate Div layer only works with Firefox but not IE. In this jQuery tutorial we rotate the image rather than the Div layer.

Watch jQuery Rotation Animation with Firefox and IE6 video tutorial on YouTube:

jQuery rotate Div Layer

Let’s recall the rotation animation in above tutorial. The rotation was done on the Div layer.

The HTML codes of the Mill Blade is:

<div id="mill"></div>

Note that the Mill Blade is set as the background image in the stylesheet.

And the jQuery codes:

function rotateObject() {
// Increase number by one
myAngle += 1;

// Rotate the mill
$("#mill").rotate(myAngle);
}

// Execute the function in set interval
setInterval(rotateObject, 10);

Note that the rotation animation was done on the Div layer with ID “mill”.

jQuery rotate Image

Since the rotation animation of Div layer do not works with IE6, we will try to rotate the Mill image in this jQuery tutorial.

Change the HTML code of Mill Blade as below:

<div id="mill"><img src="mill.png" id="millBlade" /></div>

Now, the Mill Blade image is embed directly on the Div Layer.

The jQuery codes are now become:

function rotateObject() {
// Increase number by one
myAngle += 1;

// Rotate the mill
$("#millBlade").rotate(myAngle);
}

// Execute the function in set interval
setInterval(rotateObject, 10);

Now the jQuery rotation animation works fine in both Firefox and IE6.

This is end of jQuery Rotation Animation Tutorial.