Scrolling List Problem

I have a list item which scrolls up and appends the first item on the list to the bottom every 5 seconds but my the problem is that, i would like the entire list to scroll for bett

Solution 1:

What happens on the "the 2nd, 3rd and 4th item scroll up"?

Anyway, this is what I believe is a better version:

functiontest() {
var a= $("ul li:first-child");
    a.slideUp("slow", function(){
        a.appendTo("ul").slideDown();
    });
};
window.setInterval(test, 1000);

EDIT:

functiontest() {
var a= $("ul li:first-child");
    a.slideUp("slow", function(){
        $(this).remove();
    });
    var b = a.clone();
    b.appendTo("ul").hide().slideDown();
};
window.setInterval(test, 1000);

Example: http://jsfiddle.net/2DNV3/20/

EDIT 2:

Example: http://jsfiddle.net/qsem9/

var scroll = function(){
    var first  = $("#scroll > li:eq(0)");
    var last = first.clone().appendTo("#scroll");

    $("#scroll").animate({ "scrollTop": first.outerHeight()  }, 500, function(){
        first.remove();
    });

    window.setTimeout(scroll, 1000);
};

$("#scroll").css({ height: $("#scroll").outerHeight() });

scroll();

This way, you have seamless scrolling no matter what - because it is actually scrolling. ;)