使用jquery旋转悬停使用

Question

我无法弄清楚如何设置jquery的旋转功能，只能在悬停时旋转。

这里是我使用的代码：

$('div.settingsButton').hover(function() { 
    var angle = 0; 
    setInterval(function() { 
     angle += 4; 
     $(this).rotate(angle); 
    }, 50); 
}, 
function() { 
    var angle = 0; 
    setInterval(function() { 
     angle = 0; 
     $(this).rotate(angle); 
    }, 50); 
}); 

的旋转是在这里找到一个插件： http://code.google.com/p/jqueryrotate/

Answer 1

在您的定时器功能，this不是DOM元素。你必须将它存储在一个变量中。另外，您应该在mouseout函数中使用clearInterval。

下面是一些示例代码：

var timer; 

$('div.settingsButton').hover(function() { 

    var angle = 0, 
     $this = $(this); 

    timer = setInterval(function() { 
     angle += 4; 
     $this.rotate(angle); 
    }, 50); 
}, 
function() { 

    timer && clearInterval(timer); 
    $(this).rotate(0); 
}); 

这里的小提琴：http://jsfiddle.net/ptJuU/