一个接一个地淡入淡出

问题描述

嘿那里的人，我很擅长HTML和CSS，但只有jsut才开始抓住jQuery的表面。我正在寻找使3个div逐渐淡入页面加载。
到目前为止，我有这个

Hey there guys, Im good with HTML and CSS but have only jsut started to scratch the surface of jQuery. I'm looking to make 3 divs fade in on page load one after another.So far I have this

<script type="text/javascript">
    $('#1').hide().fadeIn(1500);
    $('#2').hide().fadeIn(1500);
    $('#3').hide().fadeIn(1500);
</script>

听说使用css将显示设置为none对于任何使用非JavaScript的人来说都是一场噩梦浏览器，所以我使用隐藏功能来初步隐藏div。

I heard that to use css to set the display to none is a nightmare for anyone with a non JavaScript browser so I used the hide function to initially hide the divs.

但是这只能一次消除它们。
任何想法？

But this only fades them in all at once.Any ideas?

推荐答案

您可以，以便在正确的时间淡入之前，例如：

You can .delay() each so the one before fades in at the right time, for example:

$("#1, #2, #3").hide().each(function(i) {
  $(this).delay(i*1500).fadeIn(1500);
});

这会将它们淡入...按照它们在页面中出现的次序排列'之后，第一个延迟0，所以它是瞬间的，第二个延迟1500毫秒（所以当第一次完成等）。在回调 i 是索引，从0开始，所以你可以使用它来快速计算正确的延迟。

This fades them in...in the same order they occur in the page which is usually what you're after, the first is delayed 0 so it's instant, the second is delayed 1500ms (so when the first finishes, etc). In the .each() callback i is the index, starting with 0 so you can use that to quickly calculate the right delay here.

这种方法更容易维护，例如给他们一个类，然后你可以这样做：

Another advantage here is this approach is much easier to maintain, give them a class for example then you can just do:

$(".fadeMe").hide().each(function(i) {
  $(this).delay(i*1500).fadeIn(1500);
});

然后，您需要在JavaScript端进行零维护以添加额外的< div> ; 要淡出的元素。

Then you require zero maintenance on the JavaScript side to add additional <div> elements to fade.

这篇关于一个接一个地淡入淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！