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

发布于 2024-11-08 17:50:08 字数 275 浏览 4 评论 0原文

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

我已经做到了一次淡入所有内容……

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

但我不确定要在每个 DIV 中循环并在另一个 DIV 完成时将其淡入。

有人能指出我正确的方向吗？

任何建议表示赞赏！

原文

I'm looking to fade in divs with a certain class in code order, with each fade coming maybe 250ms after the last, giving the impression of a gradual page load.

I'm this far for fading in everything at once...

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

but I'm not sure where I'm going to cycle through each DIV and fade it in when the other is complete.

Can someone point me in the right direction!?

Any advice appreciated!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

救赎№ 2024-11-15 17:50:08

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

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

This fades all divs into view, each with a progessing 250ms delay. I'd recommend reducing the fade time to 2 seconds for each at max, 4 seconds seems waaay too long and will probably annoy people ;-)

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

回复收藏 0 原文

陪你到最终 2024-11-15 17:50:08

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

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

You can iterate through them and set a delay before the fadeIn():

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

回复收藏 0 原文

梦幻的味道 2024-11-15 17:50:08

尝试使用

$('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 ); 
}); 
});

参考

try with

$('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

回复收藏 0 原文

~没有更多了~