JQUERY使用动画将LI预先添加到UL

Question

我有一个UL,我正在努力通过一些动画动态地将新的LI添加到UL的顶部.

到目前为止我有以下工作正常:

$("#container").prepend('<li id="newhere"><input type="checkbox" /><span class="listTitle">Im new here</span><ul></ul></li>').hide().slideDown("slow");

#container 是UL

上面的问题是隐藏整个UL,然后将整个UL向下滑动,我只想要预先设置动画的新LI.

想法？thxs

Answer 1

你可以做你想做的有点容易使用.prependTo()和$(html),如下所示:

$('<li id="newhere"><input type="checkbox" /><span class="listTitle">Im new here</span><ul></ul></li>')
  .hide().prependTo('#container').slideDown("slow");

您可以在此处查看上述代码的演示

.prepend()返回前缀的元素,而不是前面添加的元素.切换它.prependTo()使它更清洁,并且应该具有你想要的效果,因为你可以继续链接你前面的元素.此外,如果您多次使用相同的字符串,现在将缓存文档片段并使其更快:)

最后一件事,如果您多次这样做,请确保其上的ID <li>是唯一的,或者您创建的无效HTML会产生一些不必要的副作用.