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