Hola mi problema radica en un desvanecimiento de imagenes, que esta en una funcion con setinterval, con la intencion de que se desvanesca de imagen a imagen, mientras esta en la pagina.

Todo funciona bien, pero al dejar mucho tiempo la pagina, comienza a tener comportamientos erraticos (Especificamente deja de hacer el desvanecimiento y se atora)

No entiendo por que sucede o como evitarlo? El codigo es este:

Html

Código HTML :

#slideshow {      
      position: relative;
      float:left;
   }
   
   #slideshow IMG {
      position:absolute;
      z-index:8;
   }
   
   #slideshow IMG.active {
      z-index:10;
   }
   
   #slideshow IMG.last-active {
      z-index:9;
   }

En javascript es:

Código Javascript :

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

window.onload=function(){//Cuando carge el documento entero     
   setInterval( slideSwitch, 4000 );
}

Y todo perfecto los primeros 3 o 4 minutos, pero si por alguna razon se deja mas tiempo, falla, que esta mal??