Image fade flicker with Firefox - Help!

Hi All,

I've written some code that loops through an array of images, fading each one out and in. It works fine in IE, and appears to work OK in Firefox for the first iteration, but when I go through the list a second time, the images tend to flicker.

Here's my code:

j = 0;

function doBlend() {
  if (j > 7) {
    j = 0;
  }
  blendimage(lg_images[j]);
  j++;
}

function blendimage(imagefile) {
    //set the current image as background
    currentimage = document.getElementById("blendimage").src;
    document.getElementById("blenddiv").style.backgroundImage = "url(" + currentimage + ")";
    document.getElementById("blenddiv").style.backgroundImage = "url(\"" + currentimage + "\")";
    
    //make new image
    document.getElementById("blendimage").src = imagefile;
    
    //make image transparent
    changeOpac(0, "blendimage");
    
    shiftOpacity("blendimage", 1000);
}

function opacity(id, opacStart, opacEnd, millisec) {
    //speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;

    //determine the direction for the blending, if start and end are the same nothing happens
    if(opacStart > opacEnd) {
        for(i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    } else if(opacStart < opacEnd) {
        for(i = opacStart; i <= opacEnd; i++)
            {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    }
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
    var object = document.getElementById(id).style;
    opacity = (opacity == 100)?99:opacity;

    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}

function shiftOpacity(id, millisec) {
    //if an element is invisible, make it visible, else make it ivisible
    if(document.getElementById(id).style.opacity == 1) {
        opacity(id, 100, 0, millisec);
    } else {
        opacity(id, 0, 100, millisec);
    }
}

Code (markup):

HTML part:

<div style="background-image: url( <!-- url of first image --> ); background-repeat: no-repeat; width: 500px; height: 333px;" id="blenddiv">

    <img src=" <!-- url of first image --> " style="width: 500px; height: 333px; border: 0 none; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0;" id="blendimage" />

</div>
<br>
<a href="javascript:doBlend()">Blend</a>

HTML:

It's apated from code I found here:

http://brainerror.net/scripts/javascript/blendtrans/

The

opacity = (opacity == 100)?99pacity;

is supposed to solve the problem, but I still get it for the second iteration.

Can anyone help?