Fade in e Fade out

[goodeathx 8]

Boa noite galera, eu estou com um probleminha no meu fade in e fade out... o que acontece é que, ele roda normalmente, mas quando eu troco de abas e volto a do meu site, as vezes ele fica fora de controle, não termina o fade, ou da fade in/out numa outra imagem a qual não era a ordem correta. No mais o problema está no setInterval ao qual eu chamo esse objeto fade. Ele sofre meio que um atraso... alguém conhece outra maneira de fazer? se possível com javascript, e não CSS. Ja testei com setTimeout também e deu no mesmo.

 

Talvez tenha algumas coisas desnecessárias no código, mas ignorem, só foram testes meus... desse jeito está funcionando, irei limpá-lo mais depois, mas só depois de resolver o bug...

 

O if(window.focus), foi uma tentativa de quando tivesse a janela ativa, ele fizesse o fade in, fade out normal... caso contrário, só fosse mudando de 0 - > 1 e 1 -> 0

 

Interval

var i = 0;
this.turnOn(i);
var intervalo = setInterval(function()
  {	
    i++
    if(i>=$this.sizeImg){i=0;}
    $this.turnOn(i);
  },7500);

  this.turnOn = function(i)
  {
    var f = new fade();
    var x = i-1;
    if(i == 0){x = 2;}
    f.fadein('a'+i);  // Fadein no id a+i{ (i,x) <= $this.sizeImg}
    f.fadeout('a'+x); // Fadeout no id a+x{(i,x)  <= $this.sizeImg}
 }

Função de fade in/out

function fade()
{
  var $this = this;
  this.opacidade = 1;
  
  this.fadein = function(div)
  {
    var dv = document.getElementById(div); --> Pega a div
    dv.style.display = "block" --> Seta como block
    if(dv.style.opacity == ''){dv.style.opacity = '0'}
	if(window.focus)
	{
         var opacidade = setTimeout(function(){
         dv.style.opacity = +dv.style.opacity+0.1;
         $this.fadein(div)},40);
         if (dv.style.opacity >= 1){dv.style.opacity = '1';clearTimeout(opacidade);}
	}
	else
	{
	  dv.style.opacity = '1';
	  clearTimeout(opacidade);
	}
  }
  this.fadeout = function(div)
  {
    var dv = document.getElementById(div);
    if(dv.style.opacity == ''){dv.style.opacity = '1'}
	if(window.focus)
	{
      var opacidade = setTimeout(function(){
      dv.style.opacity -=  0.1;
	  $this.fadeout(div)},40);
      if (dv.style.opacity <= 0)
      {
	    dv.style.display = 'none';
	    dv.style.opacity = '0'
        clearTimeout(opacidade);
      }
	}
	else
	{
	  dv.style.display = 'none';
	  dv.style.opacity = '0'
         clearTimeout(opacidade);
	}
  }