jquery - 让每个 div 在 0.2 秒后依次淡入，而不是异步淡入

Question

我有以下功能，它使 #pic-grid 中的每个 div 淡入淡出并放大。

我希望每个 div 按顺序淡入，但略有重叠。每个淡入的过渡是 0.2 所以我希望第一个 div 在 0.1 淡入(已经通过 setTimeout 在代码中设置了100) 然后第二个 div 应该仅在 0.1s(100 毫秒)后开始加载。

我已经尝试将 setTimeout 添加到 .each() 函数，但它似乎根本没有转换。

function fadeInImages(parentDiv){
            setTimeout(function(){
                $(parentDiv).children('div').each(function () {
                        console.log(this);
                        $(this).css('opacity','1').css('transform','scale(1)');
                });
            }, 100);
        }

代码笔:http://codepen.io/franhaselden/pen/RWyxqJ

Answer 1

这是我的代码，简单，没有超时，没有延迟:演示 http://codepen.io/anon/pen/MaGQvm

var i = 0;
var length = $('#pic-grid').children('div').length;
doAnimate(i, length);
function doAnimate(i, length){
  if(i < length){
     $($('#pic-grid').children('div')[i]).animate({"opacity": 1}, 100, function(){doAnimate(i + 1, length);});
  }
}