jQuery旋转函数没有触发。

我有以下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：

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

此外， setInterval方法中的内容不再引用所选元素，而是引用window 。 你必须保持this的引用：

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

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

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

如果这一切都已修复， 则可以正常工作→ 。

Answer 2

您还可以查看该jQuery插件：

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