Image fade flicker with Firefox - Help!

[malcovitch]

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)?99pacity;

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);
}
}

And the HTML:

<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>

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?

 

[BillyRayPreachersSon]

In "shiftOpacity", try changing the 100s to 99s.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[malcovitch]

Hi Dan,

I'm already changing the opacity to 99 in changeOpac(), so the end result is the same.