Como fazer um efeito adicionando um novo item a uma lista – javascript jquery html

Pergunta:


Tenho uma lista que atualiza de tempos em tempos e gostaria de adicionar um efeito igual ao deste site: Site

É a lista que está no meio do site.

Onde, quando um item novo entra na lista, o restante dos itens descem fazendo um efeito.

Autor da pergunta Igor Martins

Michael Siegwarth

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.

O que o site está fazendo é bem simples:

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

Basicamente o truque está aqui (expandi o código um pouco pra simplificar o entendimento):

$("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();
});

Ele obtém e substitui o código HTML completo da lista, mas antes que o navegador renderize esse HTML ele usa jQuery para esconder o primeiro elemento, e define para mostra-lo com interpolação.

Ao mesmo tempo aplica uma interpolação de desaparecimento no último elemento, que ao concluir remove-o.

O senaste.php encarrega-se de gerar a nova lista em PHP. Se o lastid provido pelo AJAX for igual ao lastid atual, o senaste.php não retorna dados, então a lista não é atualizada.

Fonte

Related Posts:

Qual a diferença entre AppCompatActivity e Activity? – android android-activity
Pergunta: Qual a diferença da AppCompatActivity para Activity ? A partir de qual versão a AppCompatActivity foi adicionada ao Android? Autor da pergunta Luhhh A diferença reside ...
Como abreviar palavras em PHP? – php string
Pergunta: Possuo informações comuns como nome de pessoas e endereços, e preciso que elas contenham no máximo 30 caracteres sem cortar palavras. Exemplo: 'Avenida Natalino João Brescansin' ...
Qual é a finalidade de um parêntese vazio numa declaração Lambda? – c# expressões-lambda característica-linguagem
Pergunta: Criei um exemplo de uma declaração Lambda sem argumentos, entretanto, estou com duvidas referente a omissão do parêntese vazio () na declaração. Veja o exemplo: class ...
Boas práticas para URI em API RESTful – api rest restful
Pergunta: Estou com dúvida em relação às URIs de alguns recursos da api que estou desenvolvendo. Tenho os recursos projetos e atividades com relação 1-N, ...
Dúvidas sobre a integração do MySQL com Java – java mysql netbeans
Pergunta: Estou criando um sistema no NetBeans, utilizando a linguagem Java e o banco de dados MySQL. Escrevi o seguinte código para realizar a conexão ...
Qual é a finalidade da pasta Model do framework Inphinit? – php inphinit
Pergunta: No Inphinit micro-framework existe a pasta Model que fica dentro da pasta application, e nela é onde ficam as classes, mas eu estou muito ...
Uso do ‘@’ em variáveis – javascript typescript coffeescript
Pergunta: Vejo em algumas linguagens que compilam para javascript, como TypeScript e CoffeeScript, o uso do @ em variáveis, como também, casos em que o ...
Qual tamanho máximo um arquivo JSON pode ter? – json arquivo
Pergunta: Vou dar um exemplo para conseguir explicar minha duvida: Preciso recuperar informação de imagens vindas de uma API, esse banco de imagens me retorna JSON's ...
O que é Teste de Regressão? – terminologia engenharia-de-software testes
Pergunta: Na matéria de Teste de Software o professor abordou um termo chamado Teste de Regressão, isto dentro da disciplina de teste de software. Sendo ...
O que é um construtor da linguagem? – php característica-linguagem
Pergunta: Em PHP, já li e ouvi várias vezes a respeito dos Construtores da Linguagem. Os casos que sempre ouvi falar deles foi em casos ...
Função intrínseca para converter numérico para string – cobol
Pergunta: Estou a tentar saber se existe alguma função intrínseca do COBOL para converter um data numérico para string sem precisar usar a cláusula REDEFINES: ( ...
Porque usar implements? – java android
Pergunta: Qual a diferença entre usar btn.setOnClickListener(new OnClickListener() { e public class MainActivity extends Activity implements OnClickListener{ Estive fazendo um curso de Android e meu professor falou que ...
O que é XHTML e quando deve ser usado? – html xml xhtml
Pergunta: O que eu sei é que o XHTML precisa ser XML válido. Isso implica, por exemplo, que todas as tags precisam ser fechadas. Por ...
Uma placa aceleradora de vídeo pode melhorar o desempenho não-gráfico? [fechada] – desempenho
Pergunta: Para desenvolver em Ruby on Rails, eu utilizo aqui uma máquina virtual do VirtualBox com Ubuntu Server 14.04 sem interface gráfica instalada. Recentemente descobri uma ...
Concat() VS Union() – c# .net
Pergunta: Qual a diferença entre Concat() e Union() ? Quando usar Concat() e quando usar Union() ? Somente pode ser usado em list ? ...

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *