title: jQuery Horizontal Scrolling (click and animate)
body: <p>I have a series of divs floating to infinity in a horizontal line. I have a fixed width div container them, overflow:hidden. Ultimately, I'd like to press divs/buttons on left and right to scroll through the items (vs. using scrollbar).</p>
  
  <p>I am having trouble getting .animate() to work. I want each click to move the items within the list over.</p>
  
  <p>It should work similar to Amazons "Customers Who Bought This Item Also Bought" list that you can scroll through in the same manner. I was tempted to try using .mousedown and have it move while holding (similar to true scrolling) but want do this easier approach first.</p>
  
  <p>Here is the fiddle and code:</p>
  
  <p><a href="http://jsfiddle.net/stfzy/16/" rel="noreferrer">http://jsfiddle.net/stfzy/16/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;div id="arrowL"&gt;
  &lt;/div&gt;
  &lt;div id="arrowR"&gt;
  &lt;/div&gt;
  &lt;div id="list-container"&gt;
      &lt;div class='list'&gt;
          &lt;div class='item'&gt;
          &lt;/div&gt;
          &lt;div class='item'&gt;
          &lt;/div&gt;
          &lt;div class='item'&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code> #container{
  width:340px;
      height:50px;
  }
  
  #list-container {
  overflow:hidden;    
  width: 300px;  
  float:left;    
  }
  
  .list{
      background:grey;
  min-width:700px;
      float:left;
  }
  
  
  #arrowR{
  background:yellow;
      width:20px;
      height:50px;
      float:right;
      cursor:pointer;
  }
  
  
  #arrowL{
  background:yellow;
      width:20px;
      height:50px;
      float:left;
      cursor:pointer;
  }
  
  .item{
      background:green;
  width:140px;
      height:40px;
      margin:5px;
      float:left;
  }
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$(document).ready(function() {
  
      $('div#arrowR').click(function(){
  
          $('div.item').animate({'left':'-=300px'});
  
      });
  
      $('div#arrowR').click(function(){
  
          $('div.item').animate({'left':'+=300px'});
  
      });
  
  });
  </code></pre>
  
  <p>Any and all help appreciated. Thanks!</p>