Estoy "animando" un sprite en vuelo estacionario. El problema es que no sé cómo detener el ciclo en mouseuseout. Entonces, básicamente, después de pasar el mouse sobre el mouse, el sprite sigue moviéndose indefinidamente.

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

¿Cómo hago que se detenga en mouseuseout? ¿También hay una versión más corta (menos código) para hacer lo mismo? Tengo la impresión de que estoy desperdiciando muchas líneas en mi bucle. Gracias


Intenté esto en base al comentario de Pointy, pero no puedo entender cómo hacerlo correctamente:

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);
});
2
lisovaccaro 5 sep. 2011 a las 05:41

3 respuestas

La mejor respuesta

Prueba esto

$("#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;
});
2
ShankarSangoli 5 sep. 2011 a las 02:45

Sé que esta es una publicación antigua, pero hay un complemento ligero (que soy el desarrollador) que se llama "spriteOnHover jQuery Plugin", funciona para animar sprites en eventos de desplazamiento y mouse y tiene parámetros que hacen casi todos los trucos . Por supuesto que es de código abierto. jQuery spriteOnHover

0
steps 19 jun. 2017 a las 02:32

Cuando llame a "setInterval ()", guarde el valor que devuelve en una variable en algún lugar (o en una propiedad ".data ()"). Luego, cuando desee detener la animación, pase ese valor a "clearInterval ()".

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

// later ...

clearInterval(timer);
0
Pointy 5 sep. 2011 a las 01:46