jquery – 如何依次淡入几个div？

我正在尝试使用jQuery创建顺序fadeIn.
基本上,当页面加载时,我想要三个单词fadeIn,一个接一个.
例如：
页面加载 – > 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>

任何帮助将不胜感激.

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