jquery animation of circular list
<p>I have a vertical list of li elements that I want to rotate such that it appears as it is on a roller (like icons on a slot machine or numbers on a combination lock). I can create this by simply adding something like:</p>

<pre><code>$('#list li:first').before($('#list li:last'));
</code></pre>

<p>Problem is sometimes the list is exactly the number of visible elements in length and what I would like to retain is the last element sliding off the bottom and concurrently sliding onto the top to create the look of a circular list. One thought was to duplicate the list elements if its length was less than the visible length and animating the margin-top property of each li element to slide down but then I have duplicates of each list element, is there a better way?</p>

<p>Any help would be appreciated.</p>

<p>Edit: Rotation function based on Alex Ball's response below.</p>

<pre><code>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});
        });
    }
}
</code></pre>
