在 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 获取所有同级项，然后在该项目列表上调用动画（当然使用 if 语句跳过最新添加的项目）。