How to fade in/out a single image from a list of images with jQuery

I am almost sorry about asking here, as I believe its going to be a simple quest, but I cant figure out how to build this with jQuery as I am still learning.

We are trying to clean up a badly coded website with javascript animations going here and there, so I want to simplify the development by turning every part into jQuery instead of DHTML/Javascript hacks that is a mess to maintain.

Situation

I have two DIVs one for the "shown image" called

<div id="fader"></div> /* the shown object */

Then somewhere in the HTML I have a user defined list of images to show in that fader container.

The images are in a container I've called

        <div id="fadercontent"></div>

Like this:

        <div id="fadercontent">
                <div><img src="image0101.jpg" width="200" height="200" border="0" alt="" /></div>
                &开发者_StackOverflowlt;div><img src="image0444.jpg" width="200" height="200" border="0" alt="" /></div>
                <div><img src="image0256.jpg" width="200" height="200" border="0" alt="" /></div>
                <div><img src="image6821.jpg" width="200" height="200" border="0" alt="" /></div>
        </div>

This list can vary in size, some has 1 image, some has 20... Reason for DIV is that I might change it from IMG to something else some day. So I want to grab the DIV + all content and fade this "DIV" into the "fader" object.

Solution/idea

I was trying to collect them in an array first. By grabbing the list from fadercontent DIVs.

Something like:

var fadercontent = $('#fadercontent').children();

Then I would take the first item from fadercontent and replace the content of "#fader"

I've figured out that $("#fader").html(...) is how I replace the contents and fadeIn() would be the opacity fader.

What I can't figure out is:

1) how do I keep track of which item is next, eg. find the next in the fadercontent object, so that I can loop the list. In javascript I used the array length and a simple counter.

2) how do I set animation speed. Trying to build fadeIn through 2 sec, then pause 1 sec, then 2 sec fadeout, replace image, 2 sec fadeIn (loop). jQuery.Animate needed perhaps?

Hoping someone with jQuery talent will show me what I need to go further here.

The code below will loop through each child of faderContent and replace the html of fader... and it will just keep going and start from the beginning when it reaches the end

var index = -1;
var max = $("#fadercontent").children().length;
FadeNext();

function FadeNext() {
    index++;
    // check if at the end, otherwise start over
    if (index >= max) index = 0;

    // if #fader has no children, fadeOut will never be executed
    if ($("#fader").children().length > 0) {
        $("#fader").children().fadeOut(2000, DoFade);
    }
    else DoFade();
}

function DoFade() {
    // clone the object rather than move it so you can use it again.
    var $clone = $("#fadercontent").children().eq(index).clone().hide();

    $("#fader").html($clone);
    // fade in
    $("#fader").children().fadeIn(2000, function() {        
        FadeNext();
    });
}

working example: http://jsfiddle.net/Jruns/2/