How can I sequentially fade in several divs?
<p>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:</p>

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

&lt;div id="word1"&gt;Word 1&lt;/div&gt;
&lt;div id="word2"&gt;Word 2&lt;/div&gt;
&lt;div id="word3"&gt;Word 3&lt;/div&gt;
</code></pre>

<p>Any help would be greatly appreciated.</p>
