¡Creo que al fin encontré la solución!
Igualmente si no es lo que esperabas, estaré encantado de intentar ayudarte.
El problema era que se generaban muchas llamadas a la misma función al mover el ratón por encima, por lo tanto se creaban muchos intervalos que movían el fondo a su ritmo.
He cambiado el ejemplo que me diste para solucionarlo, simplemente aplica los mismos cambios a tu código.
Código Javascript
:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin tlo</title>
<script type="text/javascript">
var animacion_activa = new Array();
//Se crea un array que contiene referencias a los elementos que tiene una animacion activa
function pelicula(elm,jumpPx,spriteHeight,duration){
if(animacion_activa.indexOf(elm)==-1){ //Se comprueba si la animación está activa o no
animacion_activa.push(elm); //Si no lo está, se añade al array y se crea el intervalo
var inc=0;
var time=setInterval(function(){
if(inc<spriteHeight){
inc+=jumpPx;
//elm.style.backgroundPosition='0px -'+inc+'px';
elm.innerHTML=inc;
}else{
clearInterval(time);
animacion_activa.splice(animacion_activa.indexOf(elm),1); //Por último, cuando el intervalo acaba, se remueve el elemento del array (ya no está activo)
elm.style.backgroundPosition='0px -0px';
}
},duration);
}
}
</script>
</head>
<body>
<p onmouseover="pelicula(this,1,10,1000)">tiempo1</p>
<p onmouseover="pelicula(this,1,10,1000)">tiempo2</p>
</body>
</html>