Example.html

Example 1

Simply rotate an image 

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

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

See live example here: <a href="http://jsfiddle.net/RwEme/">http://jsfiddle.net/RwEme/</a> 

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 })
        }
     } 
   
});

Live example here: http://jsfiddle.net/Qtb8Z/ 

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})
        }
     } 
   
});

Live example here: http://jsfiddle.net/x9ja7/