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

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.