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})
}
}
});
0 comments:
Post a Comment