jQuery Web Page Design Tutorials

jQuery Rotation Animation Tutorial (2)

In previous 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.

jQuery Video Tutorial

jQuery rotate Div Layer

Let's recall the rotation animation in previous 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.