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

Question

I have a list that updates from time to time and would like to add an effect equal to this site: Website

It’s the list that’s in the middle of the site.

Where, when a new item enters the list, the rest of the items go down making an effect.

Answer 1

I’m guessing you’re only interested in the visual part of the thing, and you’ve already solved the part about bringing the data from the server.

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

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 is then shown with the effect slideDown.

To test, just write something in the textbox and click "Add". I created a jsFiddle to make it easy: http://jsfiddle.net/V4aDn/

If you want to leave exactly same as the site, you will need to style, and also manipulate the details of the speed of the effect.

Answer 2

What the site is doing is very 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 (expand the code a little to simplify the 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 fetches and replaces the complete HTML code from the list, but before the browser renders this HTML it uses jQuery to hide the first element, and sets to show it with interpolation.

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

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