hide AFTER fade in/out

[rogernem]

Hi. I have the following code:


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;
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 == 0) {
opacity(id, 0, 100, millisec);
} else {
opacity(id, 100, 0, millisec);
}
}




<div style="float:left; background-color:#669999">asdasd</div>
<div id="digicam2" style="float:left; background-color:#FFFF33">
<img src="attention-128x128.png" alt="" name="digicam2" style="width: 210px; height: 148px; border: 0 none;" />
</div>
<strong><a href="javascript:shiftOpacity('digicam2',1000)">hide/show</a></strong></p>



I want that when I click the link that the digicam2 div fade in/out first and THEN hiddes/shows the div.

document.getElementById('digicam2').style.display = 'none';
document.getElementById('digicam2').style.display = 'block';

Any ideas on how to do that?

[PeejAvery]

I'm confused. Are you talking about how when the page first loads and you click the "hide/show" link that it blinks and then fades in? Is that your problem?

Other than that, I'm not having any problem with the code at all.

[rogernem]

Thats one problem indeed.

The other is not really a problem
I want to use that same code but i want to hide the div only AFTER it fades. got it?

The way I m doing it hides it right away..

[PeejAvery]

Rather than reinvent the wheel...why don't you just use Prototype (http://prototypejs.org/) with scriptaculous (http://script.aculo.us/)? As you can see, they have the effects fade and appear (http://wiki.github.com/madrobby/scriptaculous/combination-effects-demo) which should work for you.