I am animating a list of images like this:

$(element).animate({

left: left + 'px'

},{

duration: 400,

easing: 'linear',

queue: false,

complete: snap,

step: function(now, fx) { // for debug

console.log('>>>>>>>'+($(this).position().left));

}

});

The element is like this: <div class="myscrollList" style="position: absolute; display: inline; top: 0px; left: -10680.7px; width: 14855px; height: 100%;">

The bug is sometimes the left value (which should be between -10680.7px and -11680.7px) is set to 0 in the first step, and therefore make the whole animation wrong and unexpected images flipped through.