title: moving a div on mousemove inside another div
body: <p>I am trying to make a div which is inside a container div move in the opposite direction of the mouse on the X axis (only left and right).</p>
  
  <p>this is what I have so far:</p>
  
  <p>html </p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="box"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css </p>
  
  <pre><code>.container { width: 450px; height: 52px; border: 1px #000 solid; position: relative; }
  .box { width: 50px; height: 50px; border: 1px #000 solid; position: absolute; right: 200px; }
  </code></pre>
  
  <p>jquery</p>
  
  <pre><code>$(document).ready(function(){
    $('div.container').mousemove(function(e){
          var x = e.pageX - this.offsetLeft;
        if ($('div.box').css('right') &lt;= '400') {
            $('div.box').css({'right': x}); 
        }
    });
  });
  </code></pre>
  
  <p>JSfiddle - <a href="http://jsfiddle.net/eyalbin/qQmu7/49/" rel="nofollow">http://jsfiddle.net/eyalbin/qQmu7/49/</a> </p>
  
  <p>for some reason the function stops working after a couple of seconds.</p>
  
  <p>can anyone help please</p>