title: mousemove and mouseenter smooth scrolling left and right and mouseleave function
body: <p>Does anyone know how to make this animation scroll left and right more smoothly it uses $.throttle class which executes every millisecond it from github does anyone know of another approach for better smothness going left and right <a href="http://jsfiddle.net/RkbP6/182/" rel="nofollow">jsFiddle</a> i also wanted to do a mouseleave and mouseout out of the wrapper to animate the scroll-content back to 0px  pixels how do i do that? my attempts have failed</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
  &lt;ul id="scroll-content"&gt;
      &lt;li class="item"&gt;&lt;img src="http://placehold.it/100x150/09f" /&gt;&lt;/li&gt;
      &lt;li class="item"&gt;&lt;img src="http://placehold.it/100x150/2f2" /&gt;&lt;/li&gt;
      &lt;li class="item"&gt;&lt;img src="http://placehold.it/100x150/234" /&gt;&lt;/li&gt;
      &lt;li class="item"&gt;&lt;img src="http://placehold.it/100x150/342" /&gt;&lt;/li&gt;
      &lt;li class="item"&gt;&lt;img src="http://placehold.it/100x150/312" /&gt;&lt;/li&gt;
      &lt;li class="item"&gt;&lt;img src="http://placehold.it/100x150/131" /&gt;&lt;/li&gt;
      &lt;li class="item"&gt;&lt;img src="http://placehold.it/100x150/111" /&gt;&lt;/li&gt;
      &lt;li class="item"&gt;&lt;img src="http://placehold.it/100x150/222" /&gt;&lt;/li&gt;
      &lt;li class="item"&gt;&lt;img src="http://placehold.it/100x150/333" /&gt;&lt;/li&gt;
      &lt;li class="item"&gt;&lt;img src="http://placehold.it/100x150/122" /&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>#wrapper {
  width: 100%;
  height: 170px;
  overflow: hidden;
  background-color: red;
  }
  #scroll-content {
  width: 1050px;
  }
  .item {
  float: left;
  margin-right: 5px;
  list-style-type: none;
  }
  </code></pre>
  
  <p>jquery:</p>
  
  <pre><code>$(document).ready(function() {
  var wrapper = $('#wrapper'),
      content = $('#scroll-content');
  
  wrapper.bind('mouseenter mousemove', $.throttle(200, mousemove));
  
  function mousemove(e) {
      var wrapper_width = wrapper.outerWidth(),
          content_width = content.outerWidth(),
          limits = 50,
          center = wrapper_width / 2,
          wrapper_pos = wrapper.offset(),
          mousePos = Math.min(Math.max(e.pageX,wrapper_pos.left + limits), wrapper_pos.left+wrapper_width-limits);
  
      //calculate new left margin
      var tmp
      if(e.pageX &gt; center) {
      tmp = (mousePos + 50 - 5) * (content_width - wrapper_width) / wrapper_width;
  }else{
           tmp = (mousePos - 50) * (content_width - wrapper_width) / wrapper_width;
  
          }
  
      content.stop().animate({
          'margin-left': '-' + tmp + 'px'
      }, 'fast', 'easeOutSine');
  }
  }); 
  </code></pre>