I need help with the timing of fadeIn() fadeOut() and delay() in jQuery
<p>So here is my function:</p>

<pre><code>function homepageRotator()
{
    var numofimgs = $('#backgroundimageholder_home img').length;
    var index = 0;
//run the rotator
rotator();

function rotator()
{
    $('#backgroundimageholder_home img').eq(index).fadeIn('1000').delay(3000*3).fadeOut('1000');
    $('#contentcontainer_home ul li').eq(index).fadeIn('1000').delay(3000*3).fadeOut('1000');
    index = index + 1;

    if(index == numofimgs)
    {
        index = 0;
    }

    setTimeout(function() {rotator()},5000)
}
}
</code></pre>

<p>So, what I've got is a simple rotator, but the rotation timing seems irratic. When it first loads, none of the timings are right, the first image appears, stays for 3 seconds then switches. Then the next one fades in, and goes away fast. Finally the 3rd one stays on for like 6 seconds then shows the first one then dissapears. Basically it's very irratic and I need to understand why.</p>

<p>Thanks for all the help.</p>

<p>OK, sorry I should have provided more information, so here's basic html layout for this:</p>

<pre><code>&lt;div class="backgroundimageholder_home" id="backgroundimageholder_home"&gt;
    &lt;?php foreach($front-&gt;result() as $row) { ?&gt;
    &lt;img src="images/homepage/&lt;?php echo $row-&gt;image; ?&gt;" alt="" class="backgroundimage_home" /&gt;
    &lt;?php } ?&gt;
&lt;/div&gt;

&lt;div class="contentcontainer_home" id="contentcontainer_home"&gt;
    &lt;ul&gt;

        &lt;?php foreach($front-&gt;result() as $row) { ?&gt;
        &lt;li&gt;
            &lt;div class="contentcontainer_top_home clearafter" id="contentcontainer_top_home"&gt;
                &lt;h2&gt;&lt;?php echo $row-&gt;name; ?&gt;&lt;/h2&gt;
                &lt;p&gt;
                    &lt;?php echo $row-&gt;text; ?&gt;
                &lt;/p&gt;
            &lt;/div&gt;

            &lt;div class="contentcontainer_bot_home" id="contentcontainer_bot_home"&gt;
                &lt;a href="&lt;?php echo $row-&gt;link; ?&gt;" title=""&gt;CLICK HERE TO VIEW&lt;/a&gt;
            &lt;/div&gt;
        &lt;/li&gt;
        &lt;?php } ?&gt;

    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>So basically my rotator rotates the script, and then it also rotates some captions, that describe the image being shown at the time. That's why I need them to rotate at the same time. I'm pretty sure there's a better way to do this, but I couldn't figure it out. What I really wanted to happen in all honesty was that there was a delay between the image and the caption:
 - fade in image
 - 2 seconds delay
 - fade in caption
 - 5 seconds delay
 - fade out caption
 - fade out image
 repeat</p>

<p>But that was blowing my mind. I could barely get them to rotate correctly without somethign overlappting, etc... anyhow, as always, everyone's help is appreciated.</p>
