IE weird scrolling issue

I have some html code as follows:

<div id="wrapper">
  <div id="items">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
  </div>
</div>

and css as such:

#wrapper {
  overflow:hidden;
  width:500px;
  height:200px;
}

#items {
开发者_如何学JAVA  overflow:hidden;
  width:1000px;
  height:200px;
}

#items .item {
  width:200px;
  height:50px;
  float:left;
}

By using jQuery's animate function I animate the wrapper layer when going left or right so that I can see all the items within the items layer. As it gets to the end I stop the animation, reset the scrollLeft position of the items layer and continue the animation thus generating a continuous effect.

In Firefox and Chrome works without a glitch. In IE I get a problem when I do the following:

When I scroll right for a few pixels and then scroll left I get two animations, the first is really quick and the second is as it should behave.

Hope this makes sense.

Has anybody experienced this before?

Steve