本文介绍了一个接一个地淡入淡出的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

嘿那里的人,我很擅长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.

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

08-21 09:11