have list slide up and append the first item to the end of the list.

Question

I want to basically slide all my li's up and the top one, will append to the bottom and it will be a rotation of upcoming events.

This is what i have so far. It slides the first one up and appends it to the end of ul, but then it just keeps appending that same li to the ul every 1000 ms.

Why doesn't it keep sliding the first one up? I'm assuming i have to use the live function somehow??

$(document).ready(function() {

    function scroll() {
        $('#events ol li:first').slideUp();

        $('#events ol li:last').appendTo($('#events ol'));
    }


    setInterval(scroll, 1000);
});

Answer 1

One mistake I see, is that your appending the last li, appending the last item will not do any difference because it's already the last item...

demo

$(document).ready(function() {

    function scroll() {
      $('#events ol li:first-child').slideUp(function(){
        $(this).appendTo($('#events ol')).show();
      });       
   }

   setInterval(scroll, 1000);​
});

Answer 2

You need to change it up a bit to append itself after sliding up, like this:

$(function() {
  function scroll() {
    $('#events ol li:first').slideUp(function() {
      $(this).show().parent().append(this);
    });
  }
  setInterval(scroll, 1000);
});

You can see it in a demo here. What we're doing is after the .slideUp() completes, the callback runs, which takes the element, shows it (since it was hidden at the end of the .slideUp()) and does a .append() of itself to its parent...moving it to the end.