The question I have is how to I get multiple instances of a function to run. Here is my function below - A simple fade function. Problem I'm having is that when it is called a second time it abandons the first call. So if a user clicks on a button it will display a message which fades.
If the user clicks on another button the previous fading message just stops at the current opacity level.
Try it here - www.arcmarks.com ( please do not repost this domain name) click on SignUp and than quickly click on SignIn with out typing anything. You will see the previous message simply halts.
?
What is the stopping mechanism? Where did the previous function go?
The function
function newEffects(element, direction, max_time )
{
newEffects.arrayHold = [];
newEffects.arrayHold[element.id] = 0;
function next()
{
newEffects.arrayHold[element.id] += 10;
if ( direction === 'up' )
{
element.style.opacity = newEffects.arrayHold[element.id] / max_time;
}
else if ( direction === 'down' )
{
element.style.opacity = ( max_time - newEffects.arrayHold[element.id] ) / max_time;
}
if ( newEffects.arrayHold[element.id] <= max_time )
{
setTimeout( next, 10 );
}
}
next();
return true;
};
The Call
newEffects(this.element, 'down', 4000 );
