Animate the position of an image based .on() .mouseenter()
<p><a href="http://jsfiddle.net/Pjp9x/6/" rel="nofollow">http://jsfiddle.net/Pjp9x/6/</a>
Problem:  I have a huge width image on a site.  Since it's a timeline I feel a great way to showcase it is a horizontal scroll.  I've created a viewport and two buttons inside of the viewport.</p>

<p>I'm trying to create a scroll of a imaged based where your mouse is.   Logically, I would like the image to add or subtract from left or right and animate as such.  Moreover, I would like the image to stop after leaving each entered space.</p>

<p><strong>JQUERY</strong></p>

<pre><code>$(".move_right").on({
      mouseenter: function(){
        $('.image').animate({right:'-100px'},"fast");

      }
});

$(".move_left").on({
      mouseenter: function(){
        $('.image').animate({left:'-100px'},"fast");

      }
});
</code></pre>

<p><strong>HTML</strong></p>

<pre><code>&lt;div class="container"&gt;
     &lt;div class="move_left"&gt;&lt;/div&gt;
     &lt;div class="move_right"&gt;&lt;/div&gt;
     &lt;img class="image" src="http://img3.etsystatic.com/008/0/6026325/il_fullxfull.365768623_qlyl.jpg" /&gt;
&lt;/div&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>.container{
 height:100%;
 width:100%;
 overflow:hidden;
 position:relative;
}
.image{
  position:relative;   

}
.move_left{
    position:absolute;
    bottom:0;
    right:0;
    width:10%; 
    background:red;
    z-index:5;
    height:100%;
}
.move_right{
    position:absolute;
    bottom:0;
    left:0;
    width:10%;
    background:red;
    z-index:5;
    height:100%
}
</code></pre>

<p>My jquery skills are quite limited.  </p>
