How to slideDown a new DIV using jQuery ?

Question

Hi.

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 Posts: <br></div>

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

thank you

Answer 1

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.

Answer 2

I think it should be:

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

EDIT: I meant this:

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

but jacerhea already gave that

Answer 3

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

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

Answer 4

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");

Answer 5

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

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