Acestuff/ Declan1991, Hi, yes they were all meant to happen simultaneously. The fade function is pasted below. It works fine with any single div elements I send to it, but doesn't do anything with the multiple one i'm posting about. Acestuff, I tried the small delay you suggested, but still no luck.
// fade opacity from 0 to 100
function fadeFull(objToFadeID, IsFadeIn, timeToFade, delay)
{
//objToFadeID - Object ID of the Div or object you want to fade
//IsFadeIn - Is this a fade in (vs fade out) 1 = true, 0 = false
//timeToFade - Time in ms to fade the object
//delay - Time in ms to delay the fade
var objToFade = document.getElementById(objToFadeID);
if(objToFade == null)
return;
var fadeXFactor = IsFadeIn==1?1:-1; // used to reverse values for fade in vs out
if ((timeToFade==0)&&(delay==0))
{
//if this is a simple instant popup, then make the settings are return
objToFade.style.opacity = 1IsFadeIn;
objToFade.style.filter = 'alpha(opacity = ' + 100IsFadeIn + ')';
objToFade.fadeState=2*fadeXFactor;
return;
}
if (delay == null)
delay = 0;
if (IsFadeIn)
objToFade.OriginalFadeInTime = timeToFade;
else
objToFade.OriginalFadeOutTime = timeToFade;
if(objToFade.fadeState != null)
{
if ((objToFade.fadeState==1fadeXFactor)||(objToFade.fadeState==2fadeXFactor)||(objToFade.fadeState==3fadeXFactor))
{
return; //Current fade is in same direction or already there so we are OK;
}
else if (objToFade.fadeState==-1fadeXFactor)
{
//reverse the time and the fade direction and let it continue
objToFade.fadeState = 1fadeXFactor;
objToFade.timeToFade = timeToFade;
if (IsFadeIn)
{
objToFade.fadeTimeLeft = timeToFade(1-objToFade.fadeTimeLeft/objToFade.OriginalFadeOutTime);
}
else
{
objToFade.fadeTimeLeft = timeToFade*(1-objToFade.fadeTimeLeft/objToFade.OriginalFadeInTime);
}
return;
}
else if (objToFade.fadeState==-3fadeXFactor)
{
//object is in hold status but direction needs to be reversed and use the passed in time value
objToFade.fadeState=3fadeXFactor;
objToFade.timeToFade = timeToFade;
if (IsFadeIn)
{
objToFade.fadeTimeLeft = timeToFade(1-objToFade.fadeTimeLeft/objToFade.OriginalFadeOutTime);
}
else
{
objToFade.fadeTimeLeft = timeToFade(1-objToFade.fadeTimeLeft/objToFade.OriginalFadeInTime);
}
return;
}
}
//if we got this far, then the object is in the fully opposite state
objToFade.timeToFade = timeToFade;
objToFade.fadeTimeLeft = timeToFade;
objToFade.fadeState = 3*fadeXFactor;
var now = new Date();
now.setMilliseconds(now.getMilliseconds() + delay);
setTimeout("animateFade(" + now.getTime() + ",'" + objToFadeID + "')", 10 + delay);
}
function animateFade(lastTick, elementID)
{
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;
var element = document.getElementById(elementID);
if (element.fadeState==3) element.fadeState=1;
if (element.fadeState==-3) element.fadeState=-1;
if(element.fadeTimeLeft <= elapsedTicks)
{
element.style.opacity = element.fadeState == 1 ? '1' : '0';
element.style.filter = 'alpha(opacity = ' + (element.fadeState == 1 ? '100' : '0') + ')';
element.fadeState = element.fadeState == 1 ? 2 : -2;
return;
}
element.fadeTimeLeft -= elapsedTicks;
var newOpVal = element.fadeTimeLeft/element.timeToFade;
if(element.fadeState == 1)
newOpVal = 1 - newOpVal ;
element.style.opacity = newOpVal;
element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';
setTimeout("animateFade(" + curTick + ",'" + elementID + "')", 10);
}