GetJson 填充列表后的 jquery 动画

Question

嗨，我想得到这个例子：

代码笔示例

我的得到：

$.getJSON("includes/dataNro1Car.php", function (result) {
$.each(result, function (key,val) {
$('.newsList').append($('<li>').text(val.name));
});
});

工作，但我的 UL 列表填充了一个 getjson。

并且没有工作有getjson...

我尝试将 jscript 放在文档中，但没有成功。

获取 JSON 数据：

[{"name":"El Gobierno ampliu00f3 la lista de beneficiarios del plan Procrear"},{"name":"Macri: "La integraciu00f3n inteligente con el mundo es el camino para reducir la pobreza""},{"name":""Es mala informaciu00f3n que los tribunales laborales fallen siempre a favor de los trabajadores""},{"name":"Macri acusu00f3 a Recalde por la "mafia de juicios laborales""},{"name":"Desopilante parodia del chat entre Diego Latorre y Natacha Jaitt"},{"name":"El Gobierno busca relanzar su vu00ednculo con empresarios ante una economu00eda que no despega"},{"name":"Los docentes universitarios vuelven al paro por 48 horas"},{"name":"Crisis en el transporte: el paro no se levanta y sigue la huelga"},{"name":"Asu00ed dibuja Chumbi: Paro de transporte"},{"name":"Fracasaron las negociaciones y continu00faa el paro de choferes"},{"name":"Cu00f3rdoba: revisan 100.000 pensiones por invalidez y ya suspendieron 4.000"},{"name":"Insu00f3lito: el intendente de Cu00f3rdoba culpu00f3 al kirchnerismo por el paro de transportes"},{"name":"Cu00f3rdoba inu00e9dita: choferes levantaron el paro tres horas y retomaron la medida"},{"name":"El regreso de los fondos buitres: el juez del caso Madoff definiru00e1 si hay que pagar u$s 1.000 millones"}]

Answer 1

试试这个，给ul一个容器类，或者在下面的代码中替换它：

var x,container=$('.container'),items,containerHeight,numberVisible,intervalSec,init;
$(function () {
$.getJSON("includes/dataNro1Car.php", function (result) {
$.each(result, function (key,val) {
$('.container').append($('<li>').text(val.name));
});
x = 0,
items = container.find('li'),
containerHeight = 0,
numberVisible = 5,
intervalSec = 2000;
setLists();
});
});

function setLists() {
if(!container.find('li:first').hasClass("first")){
container.find('li:first').addClass("first");
}
items.each(function(){
if(x < numberVisible){
containerHeight = containerHeight + $(this).outerHeight();
x++;
}
});
container.css({ height: containerHeight, overflow: "hidden" });

if(intervalSec < 700){
intervalSec = 700;
}
init = setInterval(vertCycle,intervalSec);
}
function vertCycle() {
var firstItem = container.find('li.first').html();
container.append('<li>'+firstItem+'</li>');
firstItem = '';
container.find('li.first').animate({ marginTop: "-50px" }, 600, function(){  $(this).remove(); container.find('li:first').addClass("first"); });
}
container.hover(function(){
clearInterval(init);
}, function(){
init = setInterval(vertCycle,intervalSec);
});