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

，小提琴不会运行

Answer 1

您没有调用插件中的功能：

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

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

的引用

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

我也会使rotation成为一个局部变量（var），否则如果函数触发几个元素，你就会遇到麻烦。

至于你的小提琴，你没有选择jQuery作为库使用。

如果这一切都已修复，it works → 。

Answer 2

您还可以查看该jQuery插件：

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

jQuery旋转函数没有触发。

2 个答案: