Remove divs after 20 using jQuery

Question

Hello,

Divs of class=message are generated using a post which pulls data and puts it in the page. Now, I want to remove the lower divs after it reaches 20

<div class="message">test</div>
<div class="message">test</div>
<div class="message">test</div>
.
.
.
<div class="message">test</div>

So i need a sort of function to remove the remaining divs (from bottom) as i am adding to the top.

Also when a div appears, I want it to sort of fade in. How do i achieve that? i receive data in chunks so its something like

html = '<div class="messsage">1</div><div class="message">2</div>';

Now I tried this but its really not fading in. i would like it to glow yellow and get back to normal (bonus)

$("#data").prepend(html).fadeIn(2000);

Thank you for your time.

Answer 1

For animating color transitions, use the color animations plugin.

Answer 2

You could use the gt selector, to match all elements with an index above the given one:

$('div.message:gt(20)').remove();

To your second question, you could use the prependTo function, which returns the newly added element, and you could hide the element, and then fade it in:

$(html).prependTo('#data').hide().fadeIn(2000);