title: Scroll left and right when hovering on arrows
body: <p>So I am trying to simply scroll left and right when someone hovers over arrows. I forked another JSFiddle and copied the html/css from my website I'm trying to do this on. Here it is: <a href="https://jsfiddle.net/31hf4e0h/" rel="nofollow">https://jsfiddle.net/31hf4e0h/</a></p>
  
  <p>Right now it scrolls all the way to the right when you hover over either arrow, but I want the #before arrow to make it scroll to the left. Is there an easy way to do this? Or a more simple way to achieve this effect generally?</p>
  
  <p>Here is the code:</p>
  
  <pre><code>$(function() {
  var $container = $('#object-nav ul'),
      scroll = $container.width();
  $('#after').hover(function() {
      $container.animate({
          'scrollLeft': scroll
      },{duration: 2000, queue: false});
  }, function(){
      $container.stop();
  });
  $('#before').hover(function() {
      $container.animate({
          'scrollLeft': scroll
      },{duration: 2000, queue: false});
  }, function(){
      $container.stop();
  });
  
  });
  </code></pre>
  
  <p>Thanks!</p>