setTimeout(); function overloading/slowing down??

[phauwn]

I have the following code which i use to fadeout 18 elements on mouseout, which works great on 1 element, but soon begins to slow down, or fail as I mouse over and off of the additional objects.... any idea how to improve the script?

var fademe = 0;
var opac = 1;
function hideObj(hideid) { 
hideme=document.getElementById(hideid);
hideme.style.visibility="hidden"; 
hideme.style.opacity= 1;
}
function showObj(showid) { 
showme=document.getElementById(showid);
showme.style.opacity=1; 
showme.style.visibility="visible"; 
opac = 1;
}
 
 
function closeAll() {  
    hideObj('colors01');
    hideObj('colors02');
    hideObj('colors03');
    hideObj('colors04');
    hideObj('colors05');
    hideObj('colors06');
    hideObj('colors07');
    hideObj('colors08');
    hideObj('colors09');
    hideObj('colors10');
    hideObj('colors11');
    hideObj('colors12');
    hideObj('colors13');
    hideObj('colors14');
    hideObj('colors15');
    hideObj('colors16');
    hideObj('colors17');
    hideObj('colors18');
    }
 
    function fadeObj(fadeid) 
{
 
    fademe = document.getElementById(fadeid);
    fademe.style.opacity = 1;
 
    setOpacity(1);
    }
 
 
function setOpacity (opac) 
{
 
  if (opac>0) {
    opac= fademe.style.opacity -= 0.05; 
    var myinterval = setTimeout("setOpacity()",50);
return;
    } else {
 
 
 
clearTimeout(myinterval);
return;
}
    return;
} 
 
 

[MikeFoster]

Some ideas...

1. When setOpacity is called the first time as a timeout, it is not passed an opacity value:

  var myinterval = setTimeout("setOpacity()",50);
 

I assume you intend for it to use the global variable opac. However, opac has local scope in setOpacity (it is a function parameter). You won't need the global opac if you do something like this:

  var myinterval = setTimeout("setOpacity(" + opac + ")",50);
 

2. myinterval is a local variable and will not exist when clearTimeout is called. Also you would need a 'myinterval' for each element which is to be faded.

3. setOpacity only works on the element assigned to the global 'fademe' variable. When you call setOpacity 18 times, you kick off 18 timers. When each of those 18 timeout, they call setOpacity which uses the last value assigned to 'fademe' - which is 'colors18'.

setOpacity needs to be told which element to work on. There are many different ways, but here is one technique:

function setOpacity(id)
{
  var e = document.getElementById(id);
  var o = +e.style.opacity - 0.05;
  if (opac > 0) {
    setTimeout("setOpacity('" + id + "')", 50);
    e.style.opacity = o;
  }
  else {
    e.style.opacity = 0;
  }
}
 

Note that this no longer needs an opac argument, nor global vars, nor clearTimeout. Set the element's opacity before calling setOpacity (as in fadeObj).

[phauwn]

Thanks, once i sorted out the global and local variables properly, everything seemed to work a little better :)