Jquery Rotation Function Not Firing.

I have the following jQuery extension: (function ($) { //jQuery plugin extension jQuery.fn.rotate = function(degree, maxDegree) { this.css({ WebkitTransform: 'rotate('

Solution 1:

You are not calling the function you have your plugin in:

(function ($) {
    $.fn.rotate = function(degree, maxDegree) {
        //...
    };
}(jQuery)); // <-- call

Furthermore, this inside the setInterval method does not refer to the selected elements anymore, but to window. You have to keep a reference to this:

var $self = this;
var rotation = setInterval(function() { 
    if (degree < (maxDegree/2)) { 
        $self.rotate(++degree);
     //...
};

I would als make rotation a local variable (with var) otherwise you will get in trouble if the function fires on several elements.

As for your fiddle, you did not select jQuery to use as library.

If this is all fixed, it works → .

Solution 2:

You can also have a look to that jQuery plugin :

http://www.zachstronaut.com/projects/rotate3di/