javascript - jQuery 旋转函数未触发。

Question

我有以下 jQuery 扩展:

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

我这样调用它:

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

但它没有触发，这是一个 JSFiddle: http://jsfiddle.net/neuroflux/8vZqr/

(注意，由于 live() ， fiddle 不会运行)

Answer 1

您没有调用您的插件所在的函数:

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

此外，setInterval 方法中的this 不再指向被选元素，而是指向window。您必须保留对 this 的引用:

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

我还会将 rotation 设置为局部变量(使用 var)，否则如果该函数在多个元素上触发，您将遇到麻烦。

至于你的 fiddle ，你没有选择 jQuery 作为库。

如果这一切都解决了，it works → .