javascript - 如何使用 ajax/json 让对象一个接一个地淡入淡出

Question

我正在尝试让我的 div 保存 json 数据以实现一个又一个动画。现在他们几乎同时进来。 有点像交错动画。任何帮助都会很棒，谢谢。

我的脚本

     ajax: function(){
        $.ajax('projects.json', {
            dataType: 'json',
            success: function(result){
                var count = 0;
                for(var i=0;i<result.projectName.length;i++){
                    count++;
                    result.projectName[i].ID = count;
                    var el = $("<li class='item'><h1>"+
                        result.projectName[i].name+"</h1><div><img src='"+
                        result.projectName[i].url+"' alt='"+result.projectName[i].name+"'></div><div>"+
                        result.projectName[i].color+"</div><div>"+
                        result.projectName[i].ID+"</div></li>");
                        intro.find('ul').append(el).fadeIn();
                }
            },
            error: function(error){
                alert("Error ajax not working"+error);
            }
        });
    }

这是我的 json

{
"projectName": [{
        "name": "shortSleeve",
        "url": "/../images/frog.jpg",
        "color": "blue",
        "ID": ""
    },
    {
        "name": "slongSleeve",
        "url": "images/frog.jpg",
        "color": "red",
        "ID": ""
    },
    {
        "name": "turtleSleeve",
        "url": "images/frog.jpg",
        "color": "purple",
        "ID": ""
    }]


  }

Answer 1

因为您在获取数据之前就启动了动画。您需要为要添加的 li 元素设置延迟。

for(var i=0;i<result.projectName.length;i++){
                    count++;
                    result.projectName[i].ID = count;
                    var el = $("<li class='item'><h1>"+
                        result.projectName[i].name+"</h1><div><img src='"+
                        result.projectName[i].url+"' alt='"+result.projectName[i].name+"'></div><div>"+
                        result.projectName[i].color+"</div><div>"+
                        result.projectName[i].ID+"</div></li>").hide(); //hide it before appending it
                        intro.find('ul').append(el.delay(1500 + (count*300)).fadeIn()); //now add a delay that gets incrementally higher
                }

JSFiddle