title: A little animation in Javascript
body: <p>I am new to javascript. I am trying to create a little animation. I have a background image and I have positioned an image exactly where I want it on that background image (lets call this image 'Princess'. </p>
  
  <p>What I want is for Princess to move to a certain point in the background (according to pixel x &amp; y values). </p>
  
  <p>So far with the code below, Princess moves, but doesn't stop. I've come across the clearTimeOut() function while trying to find the solution,however, is there a way to stop the movement at a certain pixel point? </p>
  
  <p>Here is the code I have so far. Thank you in advance :)</p>
  
  <pre><code>var imgObj = null;
  
  function init(){
  imgObj = document.getElementById('princess');
  imgObj.style.position= 'relative'; 
  imgObj.style.left = '0px'; 
  moveRight();
  }
  
  
  function moveRight(){
  imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
  timer = setTimeout(moveRight, 150);
  }
  
  
  window.onload = init;
  </code></pre>