speed on after()

Question

为了以一定的速度在#first_li后面插入一个li，我这样做：

$("#first_li").after("<li>Hello</li>").fadeIn(500); 

插入正常，但速度不行，有什么问题吗？

Answer 1

在将li元素添加到DOM之前，尝试将其设置为不可见：

$("#first_li").after("<li style='display: none;'>Hello</li>").next().fadeIn(500);

这是一个演示：http://jsfiddle.net/hDzAS/

这将选择#first_li元素，在其后面插入隐藏的li元素，然后选择新添加的li元素并使其淡入。

您还可以像这样将li元素添加到DOM中(如果您不喜欢编写HTML字符串)：

$("#first_li").after($("<li />").text('Hello').css('display', 'none')).next().fadeIn(500);

这是一个演示：http://jsfiddle.net/hDzAS/2/

.next()文档：http://api.jquery.com/next

更新

我个人喜欢slideDown()效果：http://jsfiddle.net/hDzAS/1/

Answer 2

尝尝这个。

$("<li>Hello</li>").appendTo("#first_li").hide().fadeIn(500);

Answer 3

确保插入的元素以隐藏状态开始：

$("#first_li").after("<li style='visibility:hidden;'>Hello</li>").fadeIn(500);

或

$("#first_li").after("<li>Hello</li>").hide().fadeIn(500);