jQuery Web Page Design Tutorials

jQuery Rotation Animation Tutorial (1)

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.

jQuery Video Tutorial

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 rotate

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.

jQuery setInterval 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

This is end of jQuery Rotation Animation Tutorial.