How to slideDown a new DIV using jQuery?

i want a jquery code which create a div contains a given content and then slide it down.

currently i have this code :

var newdivcontent = //ajax code here to bring new content
var newdivname = Math.floor(Math.random()*11);
$("#topofpage").after("<div id='"+ newdivname+"'>"+newdivcontent+"</div>");
$(newdivname).hide();
$(newdivname).slideDown("slow");


<div id="topofpage">Real Time P开发者_JAVA技巧osts: <br></div>

but it's just creating div and not doing slidedown.

thank you

Online demo: http://jsbin.com/oroha

$("<div>").html("New Data").insertAfter("#topofpage").hide().slideDown("slow");

You seem to have given your div an integer as an ID - which won't be valid, and JQuery won't be able to access it by ID. And you need a '#' selector to tell JQuery that you're trying to access a single element by id. Try this:

var newdivcontent = //ajax code here to bring new content
var newdivname = "somediv_" + Math.floor(Math.random()*11);
$("#topofpage").after("<div id='"+ newdivname+"'>"+newdivcontent+"</div>");
$('#' + newdivname ).hide();
$('#' + newdivname ).slideDown("slow");

Try creating the div hidden using HTML and then just using slideDown:

var newdivcontent = //ajax code here to bring new content
var newdivname = Math.floor(Math.random()*11);
$("#topofpage").after('<div id="'+ newdivname + '" style="display: none;">' + newdivcontent + '</div>');
$('#' + newdivname).slideDown("slow");

<div id="topofpage">Real Time Posts: <br></div>

The two animations probably aren't resolving in order as you expect them to (that's why they have callback functions) so it isn't looking right.

You also need to use the right selector in your hide/show calls, namely it needs to include the # before the div's ID in the selector.

Change your selectors to specify that it is an id attribute like so...

$("#" + newdivname).hide();
$("#" + newdivname).slideDown("slow");

I think it should be:

$('#newdivname').hide();
$('#newdivname').slideDown("slow");

EDIT: I meant this:

$('#'+newdivname).hide();
$('#'+newdivname).slideDown("slow");

but jacerhea already gave that