Auto-Scrolling Divs with JQuery (Foursquare Feed)

Question

So, I am making a call to 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 returned data can be any number of <div> elements (0 or more).

I have a <div id="container"> on my page. I want to place immediately after an AJAX call from the <div> elements that are returned from the call to container , or as many as there are if less than 8.

After that, every 5 seconds (I can do this by setting the interval in Javascript), I want to show the next one, getting the bottom maximum div from container , and the next one in the list will move to the top (ala Foursquare.com). If no longer display, this will make another AJAX call to get more, and if more is available, it will then pop up from the bottom and pop up in the same way.

These are my main questions.

How can I make this animation using jQuery? Also, where should I store the <div> elements that are initially unsuitable (if more than 8 is returned)? I guess this will also be a place to store those that return from the second AJAX call if I need to call more.

EDIT : The bottom of the <div> should only go out of the container if it does not fully match, otherwise it should just move down. This will happen if the container has less than 8 <div> .

Thanks guys!

Answer 1

Is this what you are trying to accomplish?

if so just follow the tutorial