Jquery 图像淡入延迟 X

发布于 2024-10-21 07:41:19 字数 542 浏览 4 评论 0原文

如何让我的图像一张一张地出现？我目前正在使用 Jquery fadein 使我的图像淡入，但我希望它们在不同的时间开始。无论如何，我可以延迟图像的淡入吗？几秒钟？

 <script type="text/javascript">
$(document).ready(function(){

window.onload = function() {

$('.fader1').hide().fadeIn(3000);
$('.fader2').hide().fadeIn(9000);
$('.fader3').hide().fadeIn(6000);
};


});
 </script>


 <div class="fader1"><img src="demo.jpg"></div> 
<div class="fader2"><img src="demo.jpg"></div> 
<div class="fader3"><img src="demo.jpg"></div>

原文

How can I get my images to appear one after the other? I am currently using Jquery fadein to make my images fadein but I want them to start at different times. Is there anyway i can delay an image from fading in? in seconds?

 <script type="text/javascript">
$(document).ready(function(){

window.onload = function() {

$('.fader1').hide().fadeIn(3000);
$('.fader2').hide().fadeIn(9000);
$('.fader3').hide().fadeIn(6000);
};


});
 </script>


 <div class="fader1"><img src="demo.jpg"></div> 
<div class="fader2"><img src="demo.jpg"></div> 
<div class="fader3"><img src="demo.jpg"></div>

分享到QQ

分享到微博

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

发布评论

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

这个俗人 2024-10-28 07:41:19

是的，有一个 delay 函数来实现这一点。

$('.fader1').hide().fadeIn(3000);
$('.fader2').hide().delay(1000).fadeIn(9000);
$('.fader3').hide().delay(2000).fadeIn(6000);

他们开始的时间间隔一秒钟。

实时示例（使用下面稍微偏离主题的更新，以及稍微不同的延迟时间，但您明白了）

< strong>离题：我想我会在 window.onload 之前隐藏图像。只有当最后一个东西完全加载时才会触发，所以就像现在一样，大体上图像会出现，然后消失，然后淡入。

您可以考虑在 < 的顶部执行此操作;body> 元素：

<body>
<script>document.body.className = "loading";</script>

并添加此 CSS：

body.loading .fader1, body.loading .fader2, body.loading .fader3 {
    display: none;
}

然后

jQuery(function($) {

    $(window).load(function() {
        $('body').removeClass("loading");
        $('.fader1').hide().fadeIn(3000);
        $('.fader2').hide().delay(1000).fadeIn(9000);
        $('.fader3').hide().delay(2000).fadeIn(6000);
    });
});

...或类似的。

Yes, there's the delay function for exactly that.

$('.fader1').hide().fadeIn(3000);
$('.fader2').hide().delay(1000).fadeIn(9000);
$('.fader3').hide().delay(2000).fadeIn(6000);

That starts them one second apart.

Live example (using the slightly off-topic update below, and slightly different delay times, but you get the idea)

Off-topic: I think I'd hide the images earlier than window.onload. That'll only fire when every single last thing has fully loaded, so as it is now, by and large the images will appear, then disappear, then fade in.

You might consider doing this right at the top of your <body> element:

<body>
<script>document.body.className = "loading";</script>

and adding this CSS:

body.loading .fader1, body.loading .fader2, body.loading .fader3 {
    display: none;
}

then

jQuery(function($) {

    $(window).load(function() {
        $('body').removeClass("loading");
        $('.fader1').hide().fadeIn(3000);
        $('.fader2').hide().delay(1000).fadeIn(9000);
        $('.fader3').hide().delay(2000).fadeIn(6000);
    });
});

...or similar.

回复收藏 0 原文

冷血 2024-10-28 07:41:19

您可以使用 fadeIn() 的回调在上一张图像完成时开始淡入下一张图像。尝试这样的事情：

$('.fader1').fadeIn(3000, function() {
  $('.fader2').fadeIn(3000, function() {
    $('.fader3').fadeIn(3000);
  });
});

但从已经隐藏的

开始：

<div class="fader1" style="display: none;"><img src="demo.jpg"></div> 
<div class="fader2" style="display: none;"><img src="demo.jpg"></div> 
<div class="fader3" style="display: none;"><img src="demo.jpg"></div>

参考： jquery fadeIn()

You could use fadeIn()'s callback to start the fading in of the next image just when the previous one completes. Try something like this:

$('.fader1').fadeIn(3000, function() {
  $('.fader2').fadeIn(3000, function() {
    $('.fader3').fadeIn(3000);
  });
});

but start with your <div>'s already hidden:

<div class="fader1" style="display: none;"><img src="demo.jpg"></div> 
<div class="fader2" style="display: none;"><img src="demo.jpg"></div> 
<div class="fader3" style="display: none;"><img src="demo.jpg"></div>

Refernce: jquery fadeIn()

回复收藏 0 原文