I am writing some javascript to change the opacity of an image that is currently displayed so that it seems to fade and then it changes the image to a different one. I have the `setInterval` for the image changing set to wait 5000ms. The `setInterval` for the fade is set to start at 4000ms. The `setTimeout` is called 10 times all waiting for 100ms making up the difference between the time that the fading `setInterval` waits up front and the time that the ChangeImage `setInverval` waits up front.

```
var num, lastNum = 0, count = 10, tcount = 0.0;
var file = "images/image-", ext = ".jpg", image, temp;
var f1 = "alpha(opacity=", f2 = ")";

window.onload = setTimeout(Initialize, 0);
window.onload = setInterval(ImageFader, 4000);
window.onload = setInterval(ChangeImage, 5000);

function Initialize()
{
    image = document.getElementById('title-image');
    image.src = "images/image-1.jpg";
}

function ChangeImage()
{
    image = document.getElementById('title-image');
    do
    {
        num = Math.floor((Math.random() * 10) + 1);
    } while (num == lastNum);
    lastNum = num;
    temp = file.concat(num.toString());
    image.src = temp.concat(ext);
}

function ImageFader()
{
    setTimeout(Fade, 100);
}

function Fade()
{
    tcount = count / 10;
    image.style.opacity = tcount;
    f1 = f1.concat((tcount * 100).toString());
    image.style.filter = f1.concat(f2);

    if (count > 1)
    {
        count--;
        setTimeout(Fade, 100);
    }
    else
    {
        count = 10;
        image.style.opacity = 1;
        image.style.filter = "alpha(opacity=100)";
    }
}

```

I'm really confused why the times are not matching up as they should. The fading for the first image is timed well. Where it fades and then moves to the next image at the right time. But from there on, the timing becomes out of sync. The fading happens but the image doesn't change at the right time.