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

so have div , in have several paragraphs. div has styling (e.g background, border) , paragraphs live "inside" div list items.

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

and add paragraphs via code:

$("box").append("<p>some text</p>").hide().slidedown("slow"); 

but when add new paragraph entire div "box" gets hidden , slides down. how make last paragraph slides down?

alternatively, can create paragraph jquery object hide it, append target div , since have created object seperately have reference object, using object can animate it.

here sample code:

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

here full example on js bin