title: Auto-Scrolling Divs w/ JQuery (Foursquare Feed alike)
body: <p>So I make a call for records with JQuery when the page loads like this:</p>
  
  <pre><code>$.ajax(
          {
              type: "POST",
              url: "&lt;%= Url.Action("GetRecords", "Home") %&gt;",
              data: sessioninfo,
              success: function(data){
                  // data == the divs
                }
          });
  </code></pre>
  
  <p>The <code>data</code> that comes back could be any amount of <code>&lt;div&gt;</code> elements (0 or more).</p>
  
  <p>I have a <code>&lt;div id="container"&gt;</code> on my page as well. I want to place, right after the AJAX call, 8 of the <code>&lt;div&gt;</code> elements that come back from the call into the <code>container</code>, or as many as there are if less than 8.</p>
  
  <p>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 <code>div</code> slide out of the <code>container</code>, 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.</p>
  
  <p>Here's my main questions.</p>
  
  <p>How can I do this animation with JQuery? Also, where should I store the <code>&lt;div&gt;</code> 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.</p>
  
  <p><strong>EDIT</strong>: 
  The bottom most <code>&lt;div&gt;</code> should only slide out of the <code>container</code> if it won't totally fit, otherwise, it should just slide down. This would happen if there are less than 8 <code>&lt;div&gt;</code> elements in the <code>container</code>.</p>
  
  <p>Thanks guys!</p>