How to get an embedded function to run multiple times
<p>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.</p>

<p>If the user clicks on another button the previous fading message just stops at the current opacity level.  </p>

<p><strong>?</strong></p>

<p>What is the stopping mechanism?  Where did the previous function go?</p>

<p><strong>The function</strong></p>

<pre><code>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] &lt;= max_time ) 
        {
            setTimeout( next, 10 );
        }
    }
    next();
    return true;
};
</code></pre>

<p><strong>The Call</strong></p>

<pre><code>newEffects(this.element, 'down', 4000 ); 
</code></pre>

<p><strong>Old Object</strong></p>

<pre><code>/**
 *    Effects - causes all elements that are fading to sync. to same opacity level as they share the same elapsed time.
 */

var Effects = function( element ) 
{
    this.element = element;
};

Effects.prototype.fade = function( direction, max_time ) 
{
    Effects.elapsed = 0;
    var persist_element = this.element;
    function next() 
    {
        Effects.elapsed += 10;
        if ( direction === 'up' )
        {
            persist_element.style.opacity = Effects.elapsed / max_time;
        }
        else if ( direction === 'down' )
        {
            persist_element.style.opacity = ( max_time - Effects.elapsed ) / max_time;
        }
        if ( Effects.elapsed &lt;= max_time ) 
    {
            setTimeout( next, 10 );
        }
    }
    next();
    return true;
};
</code></pre>
