Auto-Scrolling Divs w/ JQuery (Foursquare Feed alike)

Question

So I make a call for records with JQuery when the page loads like this:

$.ajax(
        {
            type: "POST",
            url: "<%= Url.Action("GetRecords", "Home") %>",
            data: sessioninfo,
            success: function(data){
                // data == the divs
              }
        });

The data that comes back could be any amount of <div> elements (0 or more).

I have a <div id="container"> on my page as well. I want to place, right after the AJAX call, 8 of the <div> elements that come back from the call into the container, or as many as there are if less than 8.

After that, every 5 seconds (I can do this by setting an interval in Javascript), I want to show the next one by having the bottom most div slide out of the container, and the next one in the list slide onto the top (ala Foursquare.com). If there's no more to display, it will make another AJAX call to get more, and if more are available, it will then pop off the bottom, and pop on top in the same fashion.

Here's my main questions.

How can I do this animation with JQuery? Also, where should I store the <div> elements that don't initially fit (if more than 8 come back)? I'm assuming this would also be the place to store the ones that come back from the second AJAX call if I need to make a call for more.

EDIT: The bottom most <div> should only slide out of the container if it won't totally fit, otherwise, it should just slide down. This would happen if there are less than 8 <div> elements in the container.

Thanks guys!

Answer 1

Is this what you trying to accomplish?

if it is, just follow the tutorial