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

Question

So I have a div and in it i have several paragraphs. The div has some styling (e.g a background, a border) and the paragraphs live "inside" the div like list items.

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

And I add paragraphs via this code:

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

But when I add a new paragraph the entire div "box" gets hidden and then slides down. How do I make it so that only the last paragraph slides down?

Answer 1

Alternatively, you can create your paragraph as a jQuery object then hide it, then append it to the target div and since you have created the object seperately you now have a reference to that object, so using that object you can easily animate it.

Here is the sample code:

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

Here is the full example on JS Bin

Answer 2

use last() : Reduce the set of matched elements to the final one in the set.

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