Question

我在悬停时“动画”精灵。问题是我不知道如何停止循环onmouseout。因此，基本上在鼠标悬停后，精灵会无限期地移动。

$("#explore").hover(function () { // Listen for hover
var number2 = 0;
setInterval(function() { // Animate sprite changing it's margin
        switch (number2) {
        case 0: 
        sprite2.style.marginLeft=-32;
        number2++;
        break;
        case 1: 
        sprite2.style.marginLeft=-64;
        number2++;
        break;
        case 2: 
        sprite2.style.marginLeft=0;
        number2 = 0;
    }
}, 120);
},function () {
        sprite2.style.marginLeft=0;
});

如何让它停止onmouseout？还有一个最短（较少的代码）版本来做同样的事情？我的印象是我在循环中浪费了很多线条。感谢

我根据Pointy评论尝试了这个，但无法弄清楚如何正确地做到这一点：

var number2 = 0;
var timer = setInterval(function() {
        switch (number2) {
        case 0: 
        sprite2.style.marginLeft=-32;
        number2++;
        break;
        case 1: 
        sprite2.style.marginLeft=-64;
        number2++;
        break;
        case 2: 
        sprite2.style.marginLeft=0;
        number2 = 0;
    }
}, 120);
},function () {
    clearInterval(timer);
});

Answer 1

试试这个

$("#explore").hover(function () { // Listen for hover
var number2 = 0;
$(this).data("hovertimer", setInterval(function() { // Animate sprite changing it's margin
        switch (number2) {
        case 0: 
        sprite2.style.marginLeft=-32;
        number2++;
        break;
        case 1: 
        sprite2.style.marginLeft=-64;
        number2++;
        break;
        case 2: 
        sprite2.style.marginLeft=0;
        number2 = 0;
    }
}, 120));
},function () {
        clearTimeout($(this).data("hovertimer"));
        sprite2.style.marginLeft=0;
});

Answer 2

当你调用“setInterval（）”时，将它返回的值保存在某个地方（或“.data（）”属性中）。然后，当您想要停止动画时，将该值传递给“clearInterval（）”。

var timer = setInterval(function() { ...

// later ...

clearInterval(timer);

Answer 3

我知道这是一个老帖子，但是有一个轻量级的插件（我碰巧是开发人员），它被称为“spriteOnHover jQuery插件”，它适用于悬停和鼠标事件上的精灵动画，并且有参数可以做几乎每一招。当然它是开源的。 jQuery spriteOnHover

停止javascript无限循环onmouseout？

3 个答案: