停止javascript无限循环onmouseout？

我在悬停时将一个精灵“动画化”。问题是，我不知道如何停止循环onmouseout。所以基本上在鼠标悬停后，精灵会无限期地移动。停止javascript无限循环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？还有一个最短的代码版本可以做同样的事情吗？我的印象是我在循环中浪费了很多线条。由于

我试过此基础上尖尖的评论，但无法弄清楚如何正确地做到这一点：

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); 
});

来源

2011-09-05 lisovaccaro

关于您的更新，您需要声明'var timer' _outside_该函数，以便mousein和mouseout函数都可以访问该函数。 – nnnnnn

试试这个

$("#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; 
});

来源

2011-09-05 02:45:56 ShankarSangoli

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

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

// later ... 

clearInterval(timer);

来源

2011-09-05 01:46:05 Pointy

可否请您替换功能？我很抱歉，但我尝试了它，无法启动它。 – lisovaccaro

我不知道你的问题意味着什么。目前还不清楚你的代码是什么。也许让“计时器”成为一个全局变量。 – Pointy

我知道这是旧的文章，但有一个轻量级的插件（我碰巧是开发者）被称为“spriteOnHover jQuery插件”，它的工作原理用于在悬停和鼠标事件上制作精灵动画，并具有几乎所有技巧的参数。当然它是开源的。 jQuery spriteOnHover

来源

2012-08-06 14:03:22 steps

停止javascript无限循环onmouseout？

回答

相关问题