title: How to move an object from start position to end position on mouse over and then back again on mouse out
body: <p>I have been having problems moving a div box from a to b and then back again. I also need it to return back to start pos when the mouse goes out of the div box. This is what ive come up with so far.</p>
  
  <pre><code>&lt;div id="tank" style=" width:344px; height:300px;
   background-image:url('images/warning2.png');
   box-shadow:0px 0px 100px;
   ;border-radius:20px; position:relative; left:-180px; top:10px;"&gt;
   &lt;/div&gt;
  
  
   &lt;script type="text/javascript"&gt;
  
   document.getElementById('tank').onmouseover = function() {
   var elem = this, 
   pos = -180,
  
   timer = setInterval(function() {
   pos--;
   elem.style.left = pos+"px";
   if( pos == 500) clearInterval(timer) ;
   document.getElementById('plane').onmouseover = null;
   },1);
   };
  </code></pre>