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

我试图让我的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);
            }
        });
    }

---

为什么不定义超时函数，然后使用result.projectName.shift（）获取当前元素并将其附加到具有fadein效果的ul，然后重新运行超时，直到result.projectName长度为0

或者，您也可以将for循环中的所有元素添加到ul中作为隐藏元素

 el.appendTo(intro.find('ul')).hide(); 

然后在for循环之后，您可以运行fadeIn，比如

var _Fadein = function()
{
    if ($('li:hidden', intro.find('ul')).filter(':first').is('*'))
    {
        $('li:hidden', intro.find('ul')).filter(':first').fadeIn(1000, _Fadein);
    }
};
_Fadein();

---

因为在获取数据之前启动动画。您需要在要添加的

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
                }

---

for（var i=0；i发生的事情是在for循环上为每个li元素分配了不同的id（例如：id=“myLi2”）。然后，通过使用nextId变量，我们跟踪当前li，该li在函数fadeInNext（）中用于查找下一个id，然后对该元素调用fadeIn

注意：我们正在为fadeIn方法使用complete callback参数，我们正在传递fadeInNext，它将在fadeIn效果完成时调用fadeInNext函数

//Use a variable to keep track of the current <li>
var nextId = 1;

//this function will call fadeIn on the next <li>, you can change 'slow' for an int (milliseconds)
function fadeInNext() {
    $('#myLi'+nextId).fadeIn('slow', fadeInNext);
    nextId++;
}

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 id='myLi"+i+"' style='display:none;' class='item'><h1>"+ //added an id and style to hide it, you can put that in css
                    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); //Wait dont call fadeIn here
            }

            //Call fadeIn on first <li>, the second parameter will call fadeInNext when fadeIn is completed
            $('#myLi0').fadeIn('slow', fadeInNext);
        },
        error: function(error){
            alert("Error ajax not working"+error);
        }
    });
}

//使用变量跟踪当前的

var-nextId=1；
//此函数将在下一个
调用fadeIn，您可以将“slow”更改为整数（毫秒）
函数fadeInNext（）{
$（'myLi'+nextId）.fadeIn（'slow'，fadeInNext）；
nextId++；
}
ajax:function（）{
$.ajax（'projects.json'{
数据类型：“json”，
成功：功能（结果）{
var计数=0；
对于（var i=0；我尝试将
.delay（）
添加到
intro.find（'ul'）.append（el）.fadeIn（）；
类似这样：
intro.find（'ul'）.append（el'）.fadeIn（）.delay（500）；
。这不起作用。我认为它必须与.animate方法相关联才能起作用。我可能错了。谢谢，尝试
intro.find（'ul'）.append（el.）.hide（）.fadeIn（）.delay（500）；
我做了一个Jaspiddle，我不知道如何让它与json调用一起工作。我找到了它并添加了一个答案。我认为这个
intro.find（'ul'）.append（el'）.hide（）；
将隐藏
ul
元素，而不是
li
元素。@imtheman对，你是el.appendTo（intro.find（'ul'）.hide（）应该行。纠正我的回答行了，非常感谢。我在这个问题上绞尽脑汁已经超过了我需要的时间了哈哈。@travismichaeller没问题，很高兴我能帮上忙。
//Use a variable to keep track of the current <li>
var nextId = 1;

//this function will call fadeIn on the next <li>, you can change 'slow' for an int (milliseconds)
function fadeInNext() {
    $('#myLi'+nextId).fadeIn('slow', fadeInNext);
    nextId++;
}

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 id='myLi"+i+"' style='display:none;' class='item'><h1>"+ //added an id and style to hide it, you can put that in css
                    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); //Wait dont call fadeIn here
            }

            //Call fadeIn on first <li>, the second parameter will call fadeInNext when fadeIn is completed
            $('#myLi0').fadeIn('slow', fadeInNext);
        },
        error: function(error){
            alert("Error ajax not working"+error);
        }
    });
}