jquery rotate

Google Code

Example 1

Simply rotate an image

  $("#img").rotate(45);

or

  $("#img").rotate({angle:45});

See live example here: http://jsfiddle.net/RwEme/

Example 2

This is simple example that rotates image when user mouseover/mouseout object.

Mouseover arrow to see effect.

  $("#img").rotate({ 
     bind: 
     { 
        mouseover : function() { 
              $(this).rotate({animateTo:180})
          },
        mouseout : function() { 
              $(this).rotate({animateTo:0})
          }
     } 
   
});

See live example here: http://jsfiddle.net/8LV3p/

Example 3

Rotate image endlessly

  var angle = 0;
  setInterval(function(){
      angle+=3;
       $("#img").rotate(angle);
  },50);

See live example here: http://jsfiddle.net/73pXD/

Rotate image endlessly using recursive function

  var rotation = function (){
     $("#img").rotate({
        angle:0, 
      animateTo:360, 
        callback: rotation
   });
}
  rotation();

See live example here: http://jsfiddle.net/YKj5D/

Rotate image endlessly using recursive function and custom easing (similar to example with simple endless rotation)

  var rotation = function (){
     $("#img").rotate({
        angle:0, 
      animateTo:360, 
        callback: rotation,
      easing: function (x,t,b,c,d){        // t: current time, b: begInnIng value, c: change In value, d: duration
            return c*(t/d)+b;
        }
   });
}
  rotation();

See live example here: http://jsfiddle.net/xw89p/

Example 4

Animation rotate using easing from http://gsgd.co.uk/sandbox/jquery/easing/

(remember to also include <script> contains easing)

Click on arrow to see effect.

  $("#img").rotate({ 
     bind: 
     { 
        click: function(){
              $(this).rotate({ angle:0,animateTo:180,easing: $.easing.easeInOutExpo })
          }
     } 
   
});

Example 5

Animation shows how to use variables in JavaScript...

Click on arrow to see effect.

  var value = 0
  $("#img").rotate({ 
     bind: 
     { 
        click: function(){
              value +=90;
            $(this).rotate({ animateTo:value})
          }
     } 
   
});