JSFiddle - React, Tailwind, and code Playground

by boctulus

HTML

<body>
<div id = "moverDiv"><br/></div>
</body>

CSS

body {background-color: #000;}	

   #moverDiv
   {
		width:350px;
		height:350px;
		background-image: url("http://oi54.tinypic.com/28k3pjo.jpg");
		border: red 2px;
		position:relative;
   }

JavaScript

// @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);
					div.addEventListener ('mouseover',miHandler,false);
				}	
				elem.style.left = i;
				i++;
				
			},1);
		})();	
		
		
	}
		
	window.onload = function()
	{	
		div = document.getElementById('moverDiv');	
 
		miHandler = function(){moveMeHor(div,500,true);};	
	
		// espero 1 segundo antes de registrar el mouseover	
		setInterval(function(){
			div.addEventListener ('mouseover',miHandler,false);
		},1000);
	}