Move div down smoothly while updating in JQuery

I was trying to make a list that updates from the top. E开发者_如何学JAVAvery time when new list item is inserted, old items will be moved down together smoothly

So firstly I generate list item every time I click

function addItem(){ 
 $('#public').prepend('<li><div id="item' + i + '" class="tile"></div></li>');
 $('#item' + i).fadeIn();                                        
 i ++}

then I tried to animate() them down by using the code below:

 $('.tile').animate({top:42},500);

Strangely, only the last element will animate down smoothly, other elements will still be squashed down. And there is always 42px white between.

I don't see where the variable i gets initialized? I mean, does it increment since you don't pass the variable in the method or retrieve the current value from somewhere. I don't think you need to use the variable anyhow by the way. You can use jQuery to get all siblings and than call the animate on that list of items (of course with an if statement that skips the latest added item).