Time for action – animating an element's rotation

We'll just be rotating a simple image in this example, so this is the only visible element we need in the <body> of the page.

  1. Add the following <img> to a fresh copy of the template file:
    <img src="img/color-wheel.png" id="colorWheel">
  2. At this point we don't even need any styles as everything we need to set can be done in the JavaScript, which we'll add next.
  3. In the function at the bottom of the HTML page, add the following code:
    var img = $("#colorWheel"), offset = img.offset(), origWidth = img.width(), origHeight = img.height(), rotateStrings = [ "rotate(", 0, "deg)" ], getVendor = function() { var prefix = null, vendorStrings = { pure: "transform", moz: "-moz-transform", webkit: "-webkit-transform", ...

Get jQuery 1.4 Animation Techniques Beginner's Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial