Flicker Problem - Javascript & Scriptaculous

[SuPerNoVi]

Hi bit of a long shot this but hoping to get some help with a simple animation I created using scriptaculous.

Basically when you click the next arrow a div with an image will disappear and the next one will display using Effect.Opacity. Just before the animation kicks in the full image displays using display:block; creating like a flicker between transitions.

Does anyone know how I can get this animation to not flicker?

Here's the function I'm using..

function transition(type)
{

if(type == 'forward' && selectedproduct <= 1)
{
selectedproduct = selectedproduct + 1;

if(selectedproduct == 1)
{
new Effect.Opacity('product2', { from: 0.0, to: 1.0, duration: 2 });

document.getElementById('product1').style.display="none";
document.getElementById('product2').style.display="block";

document.getElementById('product1info').style.display="none";
document.getElementById('product2info').style.display="block";

document.getElementById('visitsite').href="http://www.kelkoo.co.uk";
}

if(selectedproduct == 2)
{
new Effect.Opacity('product3', { from: 0.0, to: 1.0, duration: 2 });

document.getElementById('product2').style.display="none";
document.getElementById('product3').style.display="block";

document.getElementById('product2info').style.display="none";
document.getElementById('product3info').style.display="block";

document.getElementById('visitsite').href="http://www.bbc.co.uk";
}
}

if(type == 'back' && selectedproduct > 0)
{
selectedproduct = selectedproduct - 1;

if(selectedproduct == 0)
{
new Effect.Opacity('product1', { from: 0.0, to: 1.0, duration: 2 });

document.getElementById('product2').style.display="none";
document.getElementById('product1').style.display="block";

document.getElementById('product1info').style.display="block";
document.getElementById('product2info').style.display="none";

document.getElementById('visitsite').href="http://www.google.com";
}

if(selectedproduct == 1)
{
new Effect.Opacity('product2', { from: 0.0, to: 1.0, duration: 2 });

document.getElementById('product3').style.display="none";
document.getElementById('product2').style.display="block";

document.getElementById('product3info').style.display="none";
document.getElementById('product2info').style.display="block";

document.getElementById('visitsite').href="http://www.kelkoo.co.uk";
}
}

}

[madwormer2]

Effect.Fade and Effect.Appear will do the opacity changes and change the display to block.

You can also use the parallel effects thing to do a simultaneous fade and appear of two elements, one on top of the other.

Check out their wiki for more on those.

[Serberus]

I had the same problem with the opacity effect flickering. My code:

new Effect.Opacity(container, { from: 1, to: 0, duration: 0.5 });
container.innerHTML = html;
new Effect.Opacity(container, { from: 0, to: 1, duration: 1 });

As you can see, I'm fading the div out, changing the content and then fading it back in - however it would flicker during the opacity change. After reading around and doing some further debugging (this flicker would happen in IE6, IE7, Safari and FF3) I realised the effects were not running in the sequence.
I eventually solved it doing the following...

container.setStyle({opacity: 0});
container.innerHTML = html;
new Effect.Opacity(container, { from: 0, to: 1, duration: 1 });

Removing the first effect, which seemed to be running during the second, stopped the flickering.

[Weedpacket]

Another option would have been to use an Effect Queue.