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);
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