在窗口加载时逐渐淡入元素

Posted 2023-02-25

【中文标题】在窗口加载时逐渐淡入元素

【英文标题】：Fade elements in incrementally on window load

【发布时间】：2011-05-19 10:32:19

【问题描述】：

我希望以代码顺序淡入具有特定类的 div，每次淡入可能在最后一次之后 250 毫秒出现，给人一种逐渐加载页面的印象。

我已经走到这一步，可以一次淡出所有东西......

$(window).load(function() 
   $('div.fade_this_please').fadeIn(4000);
);

但我不确定我将在哪里循环遍历每个 DIV 并在另一个完成时将其淡入。

谁能指出我正确的方向！？

任何建议表示赞赏！

【参考方案1】：

这会将所有 div 淡入视野，每个 div 都有 250 毫秒的延迟。我建议将淡入淡出时间最多减少到 2 秒，4 秒似乎太长了，可能会惹恼人们；-)

$(window).load(function() 
   $('div').each(function(i) 
      $(this).delay((i + 1) * 250).fadeIn(2000);
   );
);

【参考方案2】：

您可以遍历它们并在 fadeIn() 之前设置延迟：

$(window).load(function()
   var delay = 0;
   $('div.fade_this_please').each(function()
      $(this).delay(delay).fadeIn(4000);
      delay += 250;
   );
);

【参考方案3】：

试试

$('div.fade_this_please').fadeIn(4000).delay(250);

或

jQuery(function($)
var e = $('div.fade_this_please'); 
e.fadeIn(); 
e.queue(function() 
  setTimeout(function() 
    e.dequeue(); 
  , 250 ); 
); 
);

reference