jQuery Function fadeTo() on all divs

I'm trying to achieve an effect where I fade in all of the specified divs, one-by-one. I wrote this function:

jQuery:

(function($) {
    $.fn.fadeAll = function (options) {
        options = $.extend({}, $.fn.fadeAll.defaults, options || {});

        var loops = $(this).length;

        return $(this).each(function (i, obj) {            
            $(obj).fadeTo(options.speed, options.opacity);

            if (i++ >= loops) {
                if (typeof (options.onComplete) == 'function') {
                    options.onComplete.call();
                }
            }
            //alert($(obj).html());
        });
    };

    $.fn.fadeAll.defaults = {
        speed:      300,
        opacity:    1,
        onComplete: null
    };
})(jQuery);

In the each loop I put an alert to watch it loop through all of my objects, which it is doing just fine when I call it like so

Calling the function:

$('.nav-div').fadeAll({
    onComplete:
        function () {
            alert('done');
        }
    });

HTML:

</head>
<body>
    <section id="global-wrapper">
        <section id="load-wrapper">
            <div>
                <h1>LOADING</h1>
                <h3 id="load-percent"></h3>
            </div>
        </section>
        <section id="main-wrapper">
            <h1>TITLE</h1>
            <nav>
                <div class="nav-div">MENU ITEM 1</div>
                <div class="nav-div">MENU ITEM 2</div>
                <div class="nav-div">MENU ITEM 3</div>
                <div class="nav-div">MENU ITEM 4</div>
            </nav>
        </section>
    </section>
</body>
</html>

CSS:

body {
    background: #000;
    color: #eee;
}

#global-wrapper {
    min-height: 2000px;
}

#load-wrapper {
    margin: 0 auto;
    width: 65%;
    height: 400px;
    position: absolute;
    top: 200px;
    left: 17.5%;
}
    #load-wrapper > div {
        background: url('/Content/Images/loading.gif') center center no-repeat;
        width: 100%;
        height: 300px;
    }
        #load-wrapper > div > h1 {
            font-family: 'IM Fell DW Pica', serif;
            font-size: 30px;
            color: #eee;
            text-align: center;
            line-height: 100px;
        }
        #load-wrapper > div > h3 {
            font-family: 'IM Fell DW Pica', serif;
            font-size: 30px;
            color: #eee;
            text-align: center;
            line-height: 100px;
            margin-top: 100px;
        }

#main-wrapper {
    margin: 0 auto;
    width: 1024px;
}
    #main-wrapper > h1 {
        opacity: 0;
        font-size: 30px;
        font-family: 'IM Fell DW Pica', serif;
    }
    #main-wrapper > nav > div {
        opacity: 0;
        float: left;
        margin-right: 20px;
        font-family: Gruppo;
        font-size: 18px;
        cursor: pointer;
    }

All of my callbacks are working like expected, everything is firing off. However, my issue is that while it's going through the loop, it's not actually doing the fadeTo part; rather, it waits until it's finished going through the loop then they all fade in at once.

Can anyone point out what I'm doing incorrectly here? I'm sure it's something simple that I'm missing or just some functionality of jQuery/js that I'm missing. Any help is greatly appreciated!

Solution

you can use a delay see this fiddle

http://jsfiddle.net/U2aT4/7/

$( document ).ready(function() {
$('.nav-div').hide();
    delay=0;
    $('.nav-div').each(function(){
        $(this).delay(delay).fadeIn(1000);
        delay += 1500;

    });

});