title: animate list items left and right
body: <p>I have a little image slideshow with 8 picture, but only show 5 picture, the others are hidden.</p>
  
  <p>This is the html</p>
  
  <pre><code>&lt;div id="itemsListBox"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;img src="images/home-items/washing_machine.png" alt="" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="images/home-items/refrigerator.png" alt="" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="images/home-items/dishwasher.png" alt="" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="images/home-items/ovens_stoves_hobs.png" alt="" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="images/home-items/extractors.png" alt="" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="images/home-items/microwave_oven.png" alt="" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="images/home-items/coffee_makers.png" alt="" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="images/home-items/washer_dryer.png" alt="" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="images/home-items/tumble_dryer.png" alt="" /&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the css:</p>
  
  <pre><code>#itemsListBox {
      position: absolute;
      top: 90px;
      width: 100%;
      padding: 0 10%;
      overflow: hidden;
  }
  #itemsListBox ul {
      white-space: nowrap;
      overflow: hidden;
  }
  #itemsListBox ul li{
      list-style-type: none;
      display: inline-block;
      width: 18%;
      margin: 1%;
  }
  #itemsListBox ul li img {
      width: 100%;    
  }
  </code></pre>
  
  <p>I can move the image with this code:</p>
  
  <pre><code>$("#rightArrow").click(function(e) {
          var curr =  $("#itemsListBox ul li:last");
          curr.parent().prepend(curr);
      });
  $("#leftArrow").click(function(e) {
          var curr =  $("#itemsListBox ul li:first");
          curr.parent().append(curr);
      });
  </code></pre>
  
  <p>But i want to do this with something animation. Any idea?</p>
  
  <p>Here is a live demo:
  <a href="http://jsfiddle.net/Bergkamp/shnyH/" rel="nofollow">http://jsfiddle.net/Bergkamp/shnyH/</a></p>