Small fading bug

**wbevan20** · Apr 3 '12, 07:08 PM

I have the following image fade in/out script which does work fine except for one bug, which is if you switch tabs and back again occasionally the image being faded out will hang in the background, half transparent and half opaque.

Here is the code that I am working with

Code:

var objIn;
var objOut;
var imgCont;
var imgArr = new Array();
var waitTime = 4; //The amount of time the script waits till it should move on to the next image (seconds)
var fadespeed = 50; //The speed of the fading in and out (milliseconds)
var lastindex = 0;
var timer = 0;

function start(divElement){
  imgCont = document.getElementById(divElement);
  for(var i=0;i<imgCont.getElementsByTagName("img").length;i++){
    imgArr[i] = imgCont.getElementsByTagName("img")[i];
  }
  if(lastindex>=(imgArr.length-1)){
    timer = window.setTimeout("fadeinout(\""+imgArr[lastindex].id+"\", \""+imgArr[0].id+"\")", waitTime*1000);
  }
  else{
    timer = window.setTimeout("fadeinout(\""+imgArr[lastindex].id+"\", \""+imgArr[lastindex+1].id+"\")", waitTime*1000);
  }
}

function pause(){
  if(timer!=0){
    window.clearTimeout(timer);
    timer = 0;
  }
}

function resume(){
  if(lastindex>=(imgArr.length-1)){
    timer = window.setTimeout("fadeinout(\""+imgArr[lastindex].id+"\", \""+imgArr[0].id+"\")", waitTime*1000);
  }
  else{
    timer = window.setTimeout("fadeinout(\""+imgArr[lastindex].id+"\", \""+imgArr[lastindex+1].id+"\")", waitTime*1000);
  }
}

function fadeinout(current, out){
  objIn = document.getElementById(current);
  objOut = document.getElementById(out);
  fdio();
  if(lastindex>=(imgArr.length-1)){
    lastindex = 0;
  }
  else{
    lastindex = lastindex + 1;
  }
  start(imgCont.id);
}

function fdio(){
  if(document.all){ //If statement is true then browser is IE
    if(objIn.filters.alpha.opacity>0){
      objIn.style.filter = 'alpha(opacity='+(objIn.filters.alpha.opacity-10)+')';
      objOut.style.filter = 'alpha(opacity='+(objOut.filters.alpha.opacity+10)+')';
      setTimeout("fdio(\""+objIn.id+"\", \""+objOut.id+"\")", fadespeed);
    }
  }
  else{
    if(objIn.style.opacity>0){
      objIn.style.opacity = ((objIn.style.opacity*10)-1)/10;
      objOut.style.opacity = ((objOut.style.opacity*10)+1)/10;
      setTimeout("fdio(\""+objIn.id+"\", \""+objOut.id+"\")", fadespeed);
    }
  }
}

P.S. The error can also occur when switching to different programs for a while, leaving the script running in the background