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 O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.