title: jQuery scrollLeft is not scrolling
body: <p>I have a container <code>div</code> with a <code>ul</code> inside of it setup like this jsFiddle: <a href="http://jsfiddle.net/BQPVL/1/" rel="noreferrer">http://jsfiddle.net/BQPVL/1/</a></p>
  
  <p>Why isn't the scroll working?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="outside"&gt;
    &lt;ul id="inside"&gt;
      &lt;li&gt;hi&lt;/li&gt;
      &lt;li&gt;how are you?&lt;/li&gt;
      &lt;li&gt;i am good.&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  &lt;button id="left"&gt;&amp;larr;&lt;/button&gt;
  &lt;button id="right"&gt;&amp;rarr;&lt;/button&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#outside {
    width: 200px;
    height: 50px;
    overflow: scroll;
  }
  #inside {
    width: 1000px;
  }
  #inside li {
    background: red;
    width: 99px;
    height: 40px;
    border-right: 1px solid black;
    float: left;
    padding: 5px;
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>var position = $("#inside").scrollLeft();
  $(document).ready(function() {
    $("#right").bind("click", function() {
      $("#inside").animate({
        scrollLeft: position + 100
      }, 1000);
    });
  });
  </code></pre>