jQuery分段滑动普通div不滑动整个div

Question

所以我有一个 div，里面有几个段落。 div 有一些样式（例如背景、边框）并且段落 "inside" 与 div 类似的列表项。

<div id="box">
   <p>'s in here
</div>

然后我通过以下代码添加段落：

$("box").append("<p>Some text</p>").hide().slideDown("slow");

但是当我添加一个新段落时，整个 div "box" 被隐藏，然后向下滑动。怎么才能让最后一段滑下来？

Answer 1

use last() : 将匹配元素的集合减少到集合中的最后一个。

$("box").append("<p>Some text</p>").children().last().hide().slideDown("slow");

Answer 2

或者，您可以将段落创建为 jQuery 对象，然后将其隐藏，然后将其附加到目标 div，因为您已经单独创建了对象，所以您现在可以引用该对象对象，因此使用该对象您可以轻松地为其设置动画。

示例代码如下：

var $paragraph = $("<p>Another paragraph</p>").hide();
$("div").append($paragraph);
$paragraph.slideDown();

这是 JS Bin

上的完整示例

jQuery slide in seperate paragraphs in a common div without sliding the whole div