使每个 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

您可以使用此代码：

JS:

var animate = function(fadeIn, time, offset) {

  $(fadeIn).each(function() {
    var me = $(this);
    setTimeout(function() {
      me.css({
        'opacity': 1,
        'transform': 'scale(1)'
      });
    }, time)
    time = time + offset;
  });
}

animate('#pic-grid > div', 0, 500);

CODEPEN

Answer 2

此代码主要基于您的代码笔，并进行了一些小调整：

setTimeout(function() {
  // We need to store the time delay so we can increment it
  var t = 0;
  $('#pic-grid').children('div').each(function() {
    // setTimeout looses the "this" scope, so set a variable here to use in setTimeout
    var _this = $(this);
    setTimeout(function() {
      _this.css('opacity', '1').css('transform', 'scale(1)')
    }, (++t * 200));
  });
}, 100);

http://codepen.io/anon/pen/OyZzdd

Answer 3

使用下面的代码

DEMO

var i = 0;
var divLength = $('#pic-grid').children('div').length;
var interval = setInterval(function() {

  $('#pic-grid').children('div:eq('+i+')').css('opacity', '1').css('transform', 'scale(1)')
  if(divLength == (i + 1)){
    clearInterval(interval)
  }
  i++;

}, 200);

Answer 4

见http://codepen.io/anon/pen/RWyxmY

$('#pic-grid').children('div').hide();
setTimeout(function() {
  var timeSpanMS = 200;
  $('#pic-grid').children('div').each(function(i) {
    console.log(this);
    $(this).delay( i*(timeSpanMS/2) ).fadeIn(timeSpanMS);    
  });
}, 100);

Answer 5

这是我的代码，简单，没有超时，没有延迟：演示 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);});
  }
}

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

Make each div fade in after 0.2 seconds sequentially, not ascynchronously

css

each

jquery

transition

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

CODEPEN