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.
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.
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.
<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>
$(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.