jquery GetJson 填充列表后的动画

Question

大家好，我想得到这个例子：

我得到json:

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

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

并且无法使用 getjson...

我尝试将 jscript 放入 document ready 中，但没有成功..

获取json数据：

[{"name":"El Gobierno ampli\u00f3 la lista de beneficiarios del plan Procrear"},{"name":"Macri: \"La integraci\u00f3n inteligente con el mundo es el camino para reducir la pobreza\""},{"name":"\"Es mala informaci\u00f3n que los tribunales laborales fallen siempre a favor de los trabajadores\""},{"name":"Macri acus\u00f3 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 v\u00ednculo con empresarios ante una econom\u00eda 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":"As\u00ed dibuja Chumbi: Paro de transporte"},{"name":"Fracasaron las negociaciones y contin\u00faa el paro de choferes"},{"name":"C\u00f3rdoba: revisan 100.000 pensiones por invalidez y ya suspendieron 4.000"},{"name":"Ins\u00f3lito: el intendente de C\u00f3rdoba culp\u00f3 al kirchnerismo por el paro de transportes"},{"name":"C\u00f3rdoba in\u00e9dita: choferes levantaron el paro tres horas y retomaron la medida"},{"name":"El regreso de los fondos buitres: el juez del caso Madoff definir\u00e1 si hay que pagar u$s 1.000 millones"}]

Answer 1

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

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

jquery GetJson 填充列表后的动画

jquery animation after GetJson populate list

jquery

getjson