带有jQuery Slidedown的PHP Ajax

i have a complicated PHP conundrum. I have a constantly updating table in my database (Lets call it TABLE) with multiple records being added a second, these results will be posted using PHP on a page (page.php) using AJAX.

The maximum amount of posts shown are 1 every three seconds, for which i have a relevancy algorithm. I don't know how to merge the jquery transitions with the constantly updated records from the table (Got by AJAX).The best i came up with isn't much better than a hack, and dosen't accomadate for an infinite number of posts.

Jquery:

$(#5).delay(1000).slideDown(700);
$(#4).delay(4000).slideDown(700);
$(#3).delay(8000).slideDown(700);
$(#2).delay(12000).slideDown(700);
$(#1).delay(16000).slideDown(700);

PHP: Not required

HTML:

<div id='5' class='post'></div>
<div id='4' class='post'></div>
<div id='3' class='post'></div>
<div id='2' class='post'></div>
<div id='1' class='post'></div>

I don't know what to do with AJAX.

Any help would be greatly appreciated,

thanks

I'm not sure, but is this basically checking for new posts every three seconds, and then displaying them with a slide down?

If so, once you've pulled the new posts with ajax, append/prepend the code to a wrapper container, preset to div to hidden, and then slide it down.

I can help with code if this is what you want but you'll need to post your ajax so I can get a better idea.

If your question is simply how to slidedown the newest appended div, try this:

HTML:

<div id="updatePanel">
    <div id='div5' class='post'></div>
    <div id='div4' class='post'></div>
    <div id='div3' class='post'></div>
    <div id='div2' class='post'></div>
    <div id='div1' class='post'></div>
</div>

Note: id attributes starting with numbers are invalid.

jQuery

setInterval(getData, 3000);

function getData() {
    // call ajax, get data.
    // success: function () {...
    var id = parseInt($("#updatePanel div:first").attr("id").replace("div", "")) + 1;

    $div = $("<div></div>").attr("id", id)
        .addClass("post")
        .text(dataFromAJAX)
        .css("display", "none") // change this to be a class - this is just to make it clear.
        .prependTo("#updatePanel")
        .slideDown();
}

Example fiddle