在JQuery中更新时平滑地移动div

Question

我试图制作一个从顶部更新的列表。每次插入新列表项时，旧项目将顺利移动到一起

首先，每次点击

我都会生成列表项

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

然后我尝试使用下面的代码来动画（）它们：

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

奇怪的是，只有最后一个元素才会平滑动画，其他元素仍然会被压扁。并且总是有42px的白色。

Answer 1

我没有看到变量i初始化的位置？我的意思是，它是否会增加，因为您没有在方法中传递变量或从某个地方检索当前值。顺便说一下，我认为你无论如何都不需要使用变量。您可以使用jQuery来获取所有兄弟节点，然后在该项列表上调用animate（当然使用if语句跳过最新添加的项目）。