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

Posted 2023-03-16

【中文标题】让每个 div 在 0.2 秒后依次淡入，而不是异步淡入

【英文标题】：Make each div fade in after 0.2 seconds sequentially, not ascynchronously

【发布时间】：2016-01-28 08:09:30

【问题描述】：

我有以下功能，可以让#pic-grid 中的每个 div 淡化和放大。

我希望每个 div 依次淡入，但略有重叠。每个淡入的过渡是 0.2 所以我希望第一个 div 在0.1 淡入（已经在代码中由setTimeout 设置为 100）然后第二个 div 应该只在 @987654328 之后开始加载@（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

【问题讨论】：

我会为每个 div 使用带有延迟的 css 动画。不需要js。

参见：***.com/questions/19478294/… 应该可以使用fadeIn 代替动画。

这个函数是使用 jQuery 的一段较大代码的一部分，所以我想把它保留在 jQuery 中，因为以后会有更多。

查看codepen.io/anon/pen/OyZzGq

【参考方案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););
  

【参考方案2】：

您可以使用此代码：

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

【参考方案3】：

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

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

【参考方案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);

【参考方案5】：

使用下面的代码

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);