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

【问题标题】：Fade elements in incrementally on window load在窗口加载时逐渐淡入元素
【发布时间】：2026-01-31 23:35:02
【问题描述】：

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

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

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

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

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

任何建议表示赞赏！

【问题讨论】：

标签： jquery fadein timing

【解决方案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

【讨论】：