Why this function does not work, i.e. 7, 8 (delay and fadein)?

Question

Why this function does not work, i.e. 7, 8 (delay and fadein)?

there is a delay in another browser and fadein is good.

But the fact that all elements are displayed at the same time (not delay and fadein).

http://jsfiddle.net/7u8qmdoo/2/

<script>
$(document).ready(function()
{    
    var i = 0;
    (function fadeInNext()
    {        
        $("#num" + i).fadeTo(1000,1);
        console.log("Fading in " + i);
        i++;
        if (i < 8)
        {
            setTimeout(fadeInNext, 2000);
        }
    })();
});
</script>

Answer 1

You can make it easier by using delayin the base loop for, but you also need to use fadeIninstead fadeTo, since the opacity animation is fadeTonot handled by IE7:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/7u8qmdoo/6/

$(document).ready(function()
{    
    for (var i = 0; i < 8; i++){
        $("#num" + i).delay(i * 2000).fadeIn(1000);
    }
});

This is the same as:

$("#num0").delay(0).fadeIn(1000,1);
$("#num1").delay(2000).fadeIn(1000,1);
$("#num2").delay(4000).fadeIn(1000,1);

etc.