Animating a jquery set one object at a time
===

First, I'm relatively new to both js and jQuery, so I apologize in advance if this is a really stupid question.  That said, here it is:
I'm trying to create a cannon-like animation for a background that does a slow 'sweep-like' transition from one image to another.
The biggest issue I've been running into is ensuring that;
a.  The increment counter is progressed and;
b.  Each 'slice' of the image completes its fadeOut before the next begins.

If there's an easy (or obvious) way of doing this, I'd love to hear it.  I've been pulling my hair out for a while now trying to figure out why these (and other similar variations) aren't working.

HTML:
img class="bg"  (10 instances of this)

    <script>
    (function() {
// --- Variation 1 ---

    function effect() {
            var i=0,
	    var current = $(".bg_1:eq(" + i + ")"),
	    arrLength = $(".bg_1").length;
		while (i<arrLength) {
			current.fadeOut(1000, 0);
			i++;
   	    }

    }
    effect();

// --- Variation 2 ---
    


    function effect() {
        var i=0,
	var current = $(".bg_1:eq(" + i + ")"),
	arrLength = $(".bg_1").length;
		while (i<arrLength) {
			current.fadeOut(1000, 0, function() {
                             i++;
               });
	    }

    }
    effect();

    })();
    </script>`

I think it may be a problem with the scope of the 'i' variable, or a conflict in jQuery at that depth of scope.  Any possible solutions would be GREATLY appreciated!

Thanks.