How to use the Rotate function in the Jquery.rotate.js library.

Rotate is a jquery rotation rotate plugin that supports Internet Explorer 6.0+, Firefox 2.0, Safari 3, Opera 9, Google Chrome, and advanced browsers using transform, Low version IE is implemented using VML.

Rotate (angle) angle parameter: [number]– default is 0

Rotate the picture to the given angle for example:
$ ("#img"). Rotate (45), or $ (' #img '). Rotate ({angle:45})

Rotate (parameters) parameters parameter: [Object] objects that contain rotation parameters.

Supported Properties:

1.angle properties: [Number]–default 0– the number of degrees of rotation and executes immediately

For example: 1$ ("#img"). Rotate ({angle:45});

2.bind property: An [Object] object that contains an event bound to a rotated object. The $ (this) inside the event points to the rotated object-so that it can be called within the inner chain-$ (this). Rotate (... ）。

For example (click on arrow):
$ ("#img"). Rotate ({bind:{
click:function () {
$ (this). Rotate ({
angle:0,
animateto:180
})
          }
       }
});

3.animateTo properties: [Number]–default 0– rotates from the current angle value animation to the given angle value (or given angle parameter)

4.duration properties: [number]– specifies an animation execution duration using Animateto

  For example   (click on arrow):  
 $ ("#img"). Rotate ({bind:{ 
      click: function () { 
          $ (this). Rotate ({ 
              duration:6000,  
              angle: 0,  
              animateto:100  
         })  
     }  
  
  

5. Step properties: [function]– The callback function executed in each animation step, the current angle value as the first parameter of the function

6. Easing property: [function]– default (see below)

Default: Function (x, T, B, C, D) {return-c * ((t=t/d-1) *t*t*t-1) + B;}

Where:

T:current time,

B:beginning value,

C:change in Value,

D:duration,

X:unused

No gradient: No easing (linear easing): function (x, T, B, C, D) {return (t/d) *c;}

Example 1: No effect, always turn
$ ("#scImg"). Rotate ({
angle:0,
animateto:360,
Callback:rotation,
easing:function (x,t,b,c,d) {
return (t/d) *c;
                             }
                      });

Example 2: The default effect
$ ("#scImg"). Rotate ({
angle:0,
animateto:360,
Callback:rotation,
easing:function (x,t,b,c,d) {
return-c* ((t=t/d-1) *t*t*t-1) +b;
                             }
                      });

Example 3:
$ ("#img"). Rotate ({bind:{
click:function () {
$ (this). Rotate ({
angle:0,
animateto:180,
Easing: $.easing.easeinoutelastic
})
        }
    }
});

7.callback Property: callback function executed when the [Function] animation completes

For example

$ ("#img"). Rotate ({bind:{
click:function () {
$ (this). Rotate ({
angle:0,
animateto:180,
callback:function () {alert (1)}
})
        }
    }
});

8. Getrotateangle This function simply returns the current angle of the rotated object.

For example:
$ ("#img"). Rotate ({
ANGLE:45,
Bind: {
Click:function () {
Alert ($ (this). Getrotateangle ());
}
}
}）;

9.stopRotate This function simply stops the spinning animation in progress. For example:

$ ("#img"). Rotate ({
bind: {
click:function () {
$ ("#img"). Rotate ({
angle:0,
animateto:180,
duration:6000
});
setTimeout (function () {
$ ("#img"). Stoprotate ();
}, +);
        }
    }
});

How to use the Rotate function in the Jquery.rotate.js library.