scrolling list problem

Question

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 better syn. The demo of the code is here. If you watch closely, only the 2nd, 3rd and 4th item scroll up...What can i do to improve this please?

Answer 1

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

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

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

EDIT:

function test() {
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. ;)