jquery - 如何在多个 div 中依次淡入淡出？

Question

我正在尝试使用 jQuery 创建顺序淡入。本质上，当页面加载时，我想要三个单词一个接一个地淡入。例如:页面加载 -> Word1 淡入 -> Word2 淡入 -> Word3 淡入。仅当前一个单词淡入完毕后，后一个单词才会淡入。目前，每个单词都在自己的 div 中。这是我到目前为止所得到的，但由于某种原因它不起作用:

<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>

任何帮助将不胜感激。

Answer 1

jsFiddle here.

一种方法是使用 each() 循环并使它们淡入:

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

注意，我提供了一个参数 fadeInDiv，该参数将为三个元素中的每一个元素递增(返回 0、1、2)并将其乘以延迟，这样您就会得到相应递增的延迟(0、500、1000 )等

当然，正如您想象的那样，这非常容易扩展 - here's another jsFiddle使用类 word 代替。