如何在多个div中依次淡入淡出? [英] How can I sequentially fade in several divs?

问题描述

我正在尝试使用jQuery创建顺序淡入. 本质上，当页面加载时，我希望三个单词fadeIn，一个接一个. 例如: 页面加载-> Word1淡入-> Word2淡入-> Word3淡入. 下一个单词只有在前一个单词逐渐消失后才会消失. 此刻每个单词都在自己的div中. 这是我到目前为止所获得的，但是由于某种原因它无法正常工作:

I'm trying to create a sequential fadeIn using jQuery. Essentially, when the page loads I want three words to fadeIn, one after the other. For example: Page loads -> Word1 fades in -> Word2 fades in -> Word3 fades in. The following word would fade in only after the preceding word had finished fading in. Each individual word is in its own div at the moment. This is what I've got so far, but for some reason it's not working:

<script type="text/javascript">
$(document).ready(function() { 
    $('#word1').delay(500).fadeIn(1000);
    $('#word2').delay(1500).fadeIn(1000);
    $('#word3').delay(2500).fadeIn(1000);
});
</script>

<div id="word1">Word 1</div>
<div id="word2">Word 2</div>
<div id="word3">Word 3</div>

任何帮助将不胜感激.

推荐答案

jsFiddle在这里.

您可以采用的一种方法是使用each()循环并将其淡入:

One way you could do it would be to use an each() loop and fade them in:

$(document).ready(function() { 
   $('#word1, #word2, #word3').each(function(fadeInDiv) {
     $(this).delay(fadeInDiv * 500).fadeIn(1000);
   });
});

请注意，我正在提供一个参数fadeInDiv，该参数将对三个元素(返回0，1，2)中的每个元素递增，并将其乘以延迟，因此您将获得延迟相应地增加(0，500，1000)等.

Note I'm supplying a parameter, fadeInDiv, which will increment for each of the three elements (returns 0, 1, 2) and multiplying that by the delay, so you will get the delay incrementing accordingly (0, 500, 1000) etc.

当然，这可以像您想象的那样轻松扩展- 这是另一个jsFiddle 使用类word代替.

Of course, this scales very easily as you'd imagine - here's another jsFiddle using a class word instead.

这篇关于如何在多个div中依次淡入淡出?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！