Skip to main content
added 142 characters in body
Fonte Link
Michael
  • 3,5mil
  • 13
  • 17

Estou supondo que você está interessado apenas na parte visual da coisa, e que já tenha resolvido a parte de trazer os dados do servidor.

Criei um exemplo bem básico, usando jQuery. Não é exatamente igual ao do site, mas acho que fica com uma didática melhor.

Código HTML:

<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>

Código Javascript:

$(function() {
    $('#add-item').on('click', function() {
        var itemText = $('#new-item').val();
        
        var newEl = $('<li>' + itemText + '</li>');
        newEl.hide();
        
        $('ul').prepend(newEl);
        
        newEl.slideDown();
        
    });
});

O prepend adiciona um elemento no ínicio. Ele fica escondido por padrão (hide), e depois é mostrado com o efeito slideDown.

Para testar, é só escrever alguma coisa no textbox e clicar em "Adicionar". Criei um jsFiddle para facilitar: http://jsfiddle.net/V4aDn/

Se você quer deixar exatamente igual ao do site, será necessário estilizar, e também manipular os detalhes da velocidade do efeito.

Criei um exemplo bem básico, usando jQuery. Não é exatamente igual ao do site, mas acho que fica com uma didática melhor.

Código HTML:

<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>

Código Javascript:

$(function() {
    $('#add-item').on('click', function() {
        var itemText = $('#new-item').val();
        
        var newEl = $('<li>' + itemText + '</li>');
        newEl.hide();
        
        $('ul').prepend(newEl);
        
        newEl.slideDown();
        
    });
});

O prepend adiciona um elemento no ínicio. Ele fica escondido por padrão (hide), e depois é mostrado com o efeito slideDown.

Para testar, é só escrever alguma coisa no textbox e clicar em "Adicionar". Criei um jsFiddle para facilitar: http://jsfiddle.net/V4aDn/

Se você quer deixar exatamente igual ao do site, será necessário estilizar, e também manipular os detalhes da velocidade do efeito.

Estou supondo que você está interessado apenas na parte visual da coisa, e que já tenha resolvido a parte de trazer os dados do servidor.

Criei um exemplo bem básico, usando jQuery. Não é exatamente igual ao do site, mas acho que fica com uma didática melhor.

Código HTML:

<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>

Código Javascript:

$(function() {
    $('#add-item').on('click', function() {
        var itemText = $('#new-item').val();
        
        var newEl = $('<li>' + itemText + '</li>');
        newEl.hide();
        
        $('ul').prepend(newEl);
        
        newEl.slideDown();
        
    });
});

O prepend adiciona um elemento no ínicio. Ele fica escondido por padrão (hide), e depois é mostrado com o efeito slideDown.

Para testar, é só escrever alguma coisa no textbox e clicar em "Adicionar". Criei um jsFiddle para facilitar: http://jsfiddle.net/V4aDn/

Se você quer deixar exatamente igual ao do site, será necessário estilizar, e também manipular os detalhes da velocidade do efeito.

Fonte Link
Michael
  • 3,5mil
  • 13
  • 17

Criei um exemplo bem básico, usando jQuery. Não é exatamente igual ao do site, mas acho que fica com uma didática melhor.

Código HTML:

<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>

Código Javascript:

$(function() {
    $('#add-item').on('click', function() {
        var itemText = $('#new-item').val();
        
        var newEl = $('<li>' + itemText + '</li>');
        newEl.hide();
        
        $('ul').prepend(newEl);
        
        newEl.slideDown();
        
    });
});

O prepend adiciona um elemento no ínicio. Ele fica escondido por padrão (hide), e depois é mostrado com o efeito slideDown.

Para testar, é só escrever alguma coisa no textbox e clicar em "Adicionar". Criei um jsFiddle para facilitar: http://jsfiddle.net/V4aDn/

Se você quer deixar exatamente igual ao do site, será necessário estilizar, e também manipular os detalhes da velocidade do efeito.