jQuery rotation function not firing.

Question

I have the following jQuery extension:

(function ($) { //jQuery plugin extension

    jQuery.fn.rotate = function(degree, maxDegree) {
        this.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
        this.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});

          // Animate rotation with a recursive call
        rotation = setInterval(function() { 
            if (degree < (maxDegree/2)) { 
                $(this).rotate(++degree);
            } else {
                clearInterval(rotation);
            }
        },5);
    };
}(jQuery));

And I'm calling it like this:

$('#test').live('mouseover',function() {
                $(this).rotate(0, 360);
            });

But it doesn't fire, here is a JSFiddle: http://jsfiddle.net/neuroflux/8vZqr/

( Note, the fiddle won't run because of the live() )

Felix Kling · Accepted Answer · 2011-07-28 14:05:06Z

2

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 → .

edited Jul 28, 2011 at 14:05

answered Jul 28, 2011 at 13:59

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Barrie Reader Over a year ago

Oops, I have - I forgot to put it into SO. Still doesn't fire : (

ChristopheCVB · Accepted Answer · 2011-07-28 14:03:04Z

1

You can also have a look to that jQuery plugin :

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

answered Jul 28, 2011 at 14:03

ChristopheCVB

7,3031 gold badge31 silver badges54 bronze badges

1 Comment

Barrie Reader Over a year ago

I'm after a 2d rotation, that plugin is huge, I only need basic functionality..

Collectives™ on Stack Overflow

jQuery rotation function not firing.

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related