使用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/