javascript execution order
<p>I am starting to learn Javascript and jQuery.
I wanted to make a simple slide show with jQuery which displays list unordered list items one by one.</p>

<p>My code is here: <a href="http://jsfiddle.net/aganhuyag/wZQGq/" rel="nofollow">on jsfiddle</a></p>

<p>I thought that I'd make the slideshow by iterating over list items in a for loop and display them with fadeIn and fadeOut effects like below:</p>

<pre><code>for(var i = 0; i &lt; 3; i++)
{
    $('#slider li:nth-child('+ i +')')
        .fadeIn()
        .delay(1000)
        .fadeOut();
}
</code></pre>

<p>But it only shows the last item in the list.</p>

<p>I read that I need to close the value of <code>i</code> variable in a separate function because of the Javascript scope that it sees the value of <code>i</code> is being increased to 2 in the loop. So, I made a separate function which closes the value of <code>i</code> and called the function. But it was still same, displaying the last item of the list.</p>

<p>So, I just wanted to try without the loop by making two separate effects on list items like below:</p>

<pre><code>$('#slider li:first-child')
    .fadeIn()
    .delay(1000)
    .fadeOut();
$('#slider li:nth-child(2)')
    .fadeIn()
    .delay(1000)
    .fadeOut();
</code></pre>

<p>But it doesn't display the list items sequentially like written above. When you run the code, it seems like the first item is shown really fast and the last item is displayed as intended.</p>

<p>I have written it like a C or Java code, thinking that it would execute from top to bottom. But it seems like Javascript is different and I didn't understand a key concept of Javascript.</p>

<p>So, my question is why it is not displaying the list items in order and only displaying the last item, and what should I need to know to make it work as intented.</p>

<p>Thank you.</p>
