JQUERY使用动画为LI准备UL

前端之家收集整理的这篇文章主要介绍了JQUERY使用动画为LI准备UL前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个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滑下来,我只想要添加前一个动画的NEW LI。

想法? thxs

解决方法

您可以使用 .prependTo()$(html)轻松地完成所需的操作,如下所示:
$('<li id="newhere"><input type="checkBox" /><span class="listTitle">Im new here</span><ul></ul></li>')
  .hide().prependTo('#container').slideDown("slow");

You can see a demo of the above code here

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

最后一件事情是,如果您多次执行此操作,请确保< li>上的ID是唯一的,或者您正在创建无效的HTML,这将会产生一些不必要的副作用。

原文链接:https://www.f2er.com/jquery/182317.html

猜你在找的jQuery相关文章