以特定方式动画li元素

Question

我正在使用jQuery创建类似于动画效果的Windows 8。请check the fiddle first！

现在，点（li元素）从中心到右边正确。但他们并没有从左到中正确地进入。

我想要第五个点到达第一个然后是第四个，依此类推。请提出解决方案。

目前，我在动画方法中使用此边距设置和持续时间： -

ml1=-1300;
ml2=-1000;
ml3=-750;
ml4=-550;
ml5=-400;

$('ul.dots2 li.'+1).animate({ marginLeft:ml1+'px'},0,'easeOutQuint');
$('ul.dots2 li.'+2).animate({ marginLeft:ml2+'px'},0,'easeOutQuint');
$('ul.dots2 li.'+3).animate({ marginLeft:ml3+'px'},0,'easeOutQuint');
$('ul.dots2 li.'+4).animate({ marginLeft:ml4+'px'},0,'easeOutQuint');
$('ul.dots2 li.'+5).animate({ marginLeft:ml5+'px'},0,'easeOutQuint');