JQuery .animate couldn't calculate the left value after it exceeds 10000

I am trying to do some kind of slider. I am just using the basic concept. I have a mask, a container div and individual items in it. Like:

<div id="mask"> ----> position:relative
   <div id="container"> -----> position: absolute
      <div class="item"></div> ----> each floated left.
      <div class="item"></div>
      <div class="item"></div>
             .....
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
   </div>
</div>

Everything is working fine, until the left value exceeds 10000 (or so I couldn't calculate it). When I click on next button it goes to the beginning and comes back to next item. It shows the correct item although it rolls back i开发者_如何学Cnstead of just slide one item.

goToNextItem: function() {
            showcaseItemWrapper.animate({left: leftPosition -= showcaseItemWidth },1000);
        }

leftPosition is set to 0 initially.

What could be the problem? Could you please help?

Thanks in advance.

#### HOW DID I APPLY DAVIDE'S SOLUTION ? #### I've set container's margin-left to -9999px and it's left to 9999px, and it worked!**

Best Rgds, Ugur Korfali

Looks like it is a jQuery bug:

http://bugs.jquery.com/ticket/7287

I am experiencing the same here. If your div width is < 20000 you can use a workaround; modify margin up to 10000 and the modify the position (left or top, depending on your div orientation). It's not very elegant, but it does the job. Davide