How to make an effect by adding a new item to a list

I'm assuming you're only interested in the visual part of the thing, and have already solved the part of bringing in the data from the server.

I created a very basic example using jQuery. It is not exactly the same as the site, but I think it gets better didactics.

HTML code:

<input type="text" id="new-item" />
<input type="button" value="Adicionar" id="add-item" />

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Javascript code:

$(function() {
    $('#add-item').on('click', function() {
        var itemText = $('#new-item').val();

        var newEl = $('<li>' + itemText + '</li>');
        newEl.hide();

        $('ul').prepend(newEl);

        newEl.slideDown();

    });
});

The prepend adds an element at the beginning. It is hidden by default ( hide ), and then shown with the slideDown effect.

To test, just write something in the textbox and click "Add". I created a jsFiddle to facilitate: link

If you want to leave exactly equal to the site, you will need to stylize, and also manipulate the details of the speed of the effect.

What the site is doing is pretty simple:

    setInterval(function() {
        var i=0;
        if($("ul.senasteList li:first").hasClass("odd")) i = 1;
        $.ajax({
            type: "POST",
            url: "senaste.php",
            dataType: "html",
            data: { lastid: $("ul.senasteList li:first").attr("id") , i: i},
            success: function (data) 
            {
                if(data.length > 0)
                {
                    $("ul.senasteList").html(data).find("li:first").hide().show("blind", {percent: 100}, 350);
                    $("ul.senasteList li:last").fadeOut(100, function() { $("ul.senasteList li:last").remove(); });
                }
            }
        });

    }, 1000);

Basically the trick is here (I expanded the code a bit to simplify understanding):

$("ul.senasteList").html(data);
$("ul.senasteList li:first").hide();
$("ul.senasteList li:first").show("blind", {percent: 100}, 350);
$("ul.senasteList li:last").fadeOut(100, function() {
    $("ul.senasteList li:last").remove();
});

It gets and replaces the full HTML from the list, but before the browser renders that HTML it uses jQuery to hide the first element, and sets it to show it with interpolation.

At the same time, it applies a disappearance interpolation on the last element, which on completion removes it.

senaste.php takes care of generating the new list in PHP. If the lastid provided by AJAX is equal to lastid current, senaste.php does not return data, then the list is not updated.