jQuery scrollLeft不滚动

我有一个容器div,里面有一个ul设置就像这个jsfiddle： http://jsfiddle.net/BQPVL/1/

滚动为什么不工作？

HTML：

<div id="outside">
  <ul id="inside">
    <li>hi</li>
    <li>how are you?</li>
    <li>i am good.</li>
  </ul>
</div>
<button id="left">&larr;</button>
<button id="right">&rarr;</button>

CSS：

#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;
}

jQuery的：

var position = $("#inside").scrollLeft();
$(document).ready(function() {
  $("#right").bind("click",function() {
    $("#inside").animate({
      scrollLeft: position + 100
    },1000);
  });
});

$(function() {  // DOM READY shorthand

  $("#right,#left").click(function() {
    var dir = this.id=="right" ? '+=' : '-=' ;
    $("#outside").stop().animate({scrollLeft: dir+'100'},1000);
  });

});