jquery - 使用 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 元素。您必须将其存储在变量中。此外，您应该clearInterval在您的mouseout功能中使用。

这是一些示例代码：

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/