循环列表的jquery动画

我有一个我想要旋转的li元素的垂直列表，使它看起来像是在滚轮上（如老虎机上的图标或组合锁上的数字）。 我可以通过简单地添加如下内容来创建它：

$('#list li:first').before($('#list li:last')); 

问题有时列表正是长度上可见元素的数量，我想要保留的是从底部滑动并同时滑动到顶部以创建圆形列表外观的最后一个元素。 一个想法是复制列表元素，如果它的长度小于可见长度并且动画每个li元素的margin-top属性向下滑动然后我有每个列表元素的重复，是否有更好的方法？

任何帮助，将不胜感激。

编辑：旋转function基于Alex Ball的回复如下。

 function rotate(direction){ var firstElem = $('#list ul li:first'); var lastElem = $('#list ul li:last'); var elemHeight = firstElem.height(); if(direction == 'down') { firstElem.animate({'marginTop': '+=' + elemHeight + 'px'}, 500, 'linear', function(){ $(this).css({'margin-top':0}).before(lastElem); }); } if(direction == 'up') { firstElem.animate({'marginTop': '-=' + elemHeight + 'px'}, 500, 'linear', function(){ lastElem.after($(this)); $(this).css({'margin-top':0}); }); } } 

Answer 1

这是一个例子（我使用了老虎机的想法，因为是范妮）

我从一些div容器和图像列表（li）开始，但这个想法对其他类型有效。

rotete JS：

 function rotate(id, n){ console.log(id); $('#'+id+' ul li:first').animate({'margin-top': '-='+$(this).height()+'px'}, 400, 'linear', function(){ $(this).css({'margin-top':0}).parent().append($(this)); i++; console.log('id: '+id+' i: '+i+' n: '+n); if(i < n) rotate(id, n); }); } 

见FIDDLE