Javascript Jquery使用each（）链接动画

我正在用列表中的每个项目元素制作动画。我的目标是当每个项目完成动画功能，下一个项目开始动画等等。现在，我所做的就是所有的项目同时运行动画功能。项目列表应该有100个项目，我只演示了3个项目

$（文档）.ready（函数（）{
$（'.list项'）。每个（函数（）{
var_this=$（this）；
_这个.find（“.load”）.animate({
宽度：“100%”
}, 2500);
});
})

.list item.item{
位置：相对位置；
}
.列表项.项目{
填充：20px；
边缘底部：10px；
}
.列表项.项.加载{
位置：绝对位置；
排名：0；
左：0；
底部：0；
宽度：0；
背景：浅蓝色；
不透明度：0.3；
-webkit转换：无！重要；
过渡：无！重要；
}

项目1
项目2
项目3

您可以使用带有dynamique

延迟的
setTimeout（）
来实现这一点


$（文档）.ready（函数（）{
var延迟=0；
$（'.list item.load'）。每个（函数（）{
var_this=$（this）；
setTimeout（函数（）{
_这是动画({
宽度：“100%”
}, 2500);
}，延误）
延迟+=2500；
});
})
.list item.item{
位置：相对位置；
}
.列表项.项目{
填充：20px；
边缘底部：10px；
}
.列表项.项.加载{
位置：绝对位置；
排名：0；
左：0；
底部：0；
宽度：0；
背景：浅蓝色；
不透明度：0.3；
-webkit转换：无！重要；
过渡：无！重要；
}

项目1
项目2
项目3
您可以使用承诺来实现：

$(document).ready(function() {
   var queue = $.Deferred().resolve(); 
      $('.list-item').find(".loading").each(function(){
        var _this = $(this);
        queue = queue.then(function(){
           return _this.animate({width: "100%"}, 2500).promise();
        })
    });
  });

演示：
您可以使用运行下一个加载序列：


$（文档）.ready（函数（）{
var animate=函数（$this）{
$this.find（“.load”）.animate({
宽度：“100%”
}, 2500, 
函数（）{
var$next=$this.next（）；
如果（$next.length>0）{
动画（下一步）；
}
});
};
动画（$（'.item'）.first（））；
})
.list item.item{
位置：相对位置；
}
.列表项.项目{
填充：20px；
边缘底部：10px；
}
.列表项.项.加载{
位置：绝对位置；
排名：0；
左：0；
底部：0；
宽度：0；
背景：浅蓝色；
不透明度：0.3；
-webkit转换：无！重要；
过渡：无！重要；
}

项目1
项目2
项目3
如果您有要制作动画的项目的确切数量和定义的延迟-您可以设置
setTimout
以在准确的时间调用每个动画（当上一个动画已经完成时）


$（文档）.ready（函数（）{
$（'.item'）。每个（函数（i）{
setTimeout（function（）{$（this）.find（“.load”）.animate（{width:“100%”，2500）；}.bind（this），i*2500）；
});
})
.list item.item{
位置：相对位置；
}
.列表项.项目{
填充：20px；
边缘底部：10px；
}
.列表项.项.加载{
位置：绝对位置；
排名：0；
左：0；
底部：0；
宽度：0；
背景：浅蓝色；
不透明度：0.3；
-webkit转换：无！重要；
过渡：无！重要；
}

项目1
项目2
项目3
如果我想做的不仅仅是动画，例如：在动画期间和动画之后在该项目元素中显示某些内容，该怎么办？