Algo asi... quizas ?
Código Javascript
:
Ver original<html>
<head>
<title>No molestar!</title>
<style>
body {background-color: #000;}
h1 {color: white;}
#moverDiv
{
width:350px;
height:350px;
background-image: url("http://oi54.tinypic.com/28k3pjo.jpg");
border: red 2px;
position:relative;
}
</style>
</head>
<body>
<h1> No me molestes </h1>
<div id = "moverDiv"></div>
<script>
// @author: Pablo Bozzolo
function moveMeHor(elem,cant,smooth)
{
smooth = smooth || false;
elem.removeEventListener('mouseover',miHandler,false);
if (!smooth){
elem.style.left = cant;
return;
}
(function(){
i = 0;
inter = setInterval(function()
{
if (i==cant)
{
clearInterval(inter);
i = 0;
//div.addEventListener ('mouseover',miHandler,false);
}
if (i>cant)
{
clearInterval(inter);
i=0;
elem.removeEventListener('mouseover',miHandler,false);
}
elem.style.left = i;
console.log(i);
i++;
},1);
})();
}
window.onload = function()
{
div = document.getElementById('moverDiv');
miHandler = function(){moveMeHor(div,500,true);};
// espero un tiempito segundo antes de registrar el mouseover
setInterval(function(){
div.addEventListener ('mouseover',miHandler,false);
},500);
}
</script>
</body>
</html>
Si a moveMeHor() le quitas el tercer parametro (que es opcional) o le colocas
false, se mueve de una vez.
PD: alquien (quizas Alexis88) sabe porque no funciona en
jsFiddle ?