How to slide element using jQuery with append method?

Question

I am trying to slide lists and want to loop it when the last child's animation is over the first will be added to the last which I am trying to use .append() method but its not working. Please help me in this regard.

#navigation{
height: 200px;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 200px;
        }
li {
  border: 1px solid #CCCCCC;
  float: left;
  height: 198px;
  list-style: none outside none;
  width: 198px;
  position: relative;
}

<div><ul id="navigation">
                <li class="active">List 1</li>
                <li>List 2</li>
                <li>List 3</li>
            </ul></div>



setInterval(function slider(){             

$("#navigation li").addClass("active").animate({                         
                    top : "-=198"
                },function(){
                    $("#navigation li").removeClass("active").next().addClass("active");
                   $("#navigation").append($("#navigation li:first");
                });

                },1000);

Answer 1

Try it this way :

setInterval(function slider(){
    var act = $('#navigation li');
    act.animate({
        top: '-198px'
    },function(){
        act.css('top','0').first('li').appendTo('#navigation')
    });
  },4000)

Check this Demo Fiddle

Answer 2

I've created a jsFiddle. Can you explain again what you are trying to achieve again? This fiddle will animate the display of each list item onLoad. I modified your li css settings display to none. Then with jQuery I loop through the list items and use the slideDown function to create the animation. Hopefully this will at least get you closer to what you are looking for.

$( "li" ).each(function( index ) {
  $( this ).slideDown( "slow", function() {
    // Animation complete.
  });
});

jsFiddle - Animate list items