Slide in prepended text jQuery

Question

I have a jquery ajax chat box that adds new messages to the top, how would I have them slide in with that jquery animation?

My current code:

$('#chatbox').prepend(document.getElementById('new_posts').innerHTML);

I'm sure it's simple but I'm a newbie at it.

Answer 1

Well you could try adding the prepended text like so.

var d = new Date();
$('#chatbox').prepend('<span id="' + d.getTime() + '" style="display:none">' + document.getElementById('new_posts').innerHTML + '</span>');

So now each new message is wrapped in a span tag with an id of the current time, so it is unique. We have also set it to hidden.

So now we slide the new one down.

$('#chatbox span#' + d.getTime()).slideDown('slow');