jQuery "push down" list as in Twitter's home page

Question

I need a jQuery list like in Twitter's home page. This means, to have many posts listed, and then, after X seconds, another post is inserted at the top of the list, with an effect, and pushing the rest of them down.

Answer 1

Exactly how to do this depends on what you want to add. As a basic principle, however, you can follow this method:

HTML:

<div id="container">
 <div>First item</div>
 <div>Second item</div>
</div>

Javascript:

$(document).ready(function(){
    setInterval(function(){
        $('<div>New item</div>').hide().prependTo('#container').slideDown('slow');
    },4000);
});

This will add a new div to the top of the container every 4 seconds. When it is added, it will slide down gradually and will push the existing divs down accordingly.

If you can provide some information about where your data is coming from, I can suggest how you might implement it.