Problems with jQuery fades using semi-transparent PNG images in IE8

I had some PNG images containing some semi-transparency (there were parts that were not completely transparent i.e. a shadow). I then used jQuery to fade between these images, as shown in the code below. This worked in all browsers except for IE, which showed a dark grey ring around each image while it was fading (it looked fine before and after each animation). I think IE was replacing each semi-transparent pixel with a fully opaque dark grey one. The solution was to apply Microsoft's AlphaImageLoader filter to each image, as shown in the CSS at the bottom.

HTML

JQUERY

setInterval(function() {
   var $active = $("#header-splats .active");
   var $next = $active.next().length ? $active.next() :
                                $("#header-splats div:first");
        
   $active.fadeOut("slow", function() {
      $active.removeClass('active');
   });
   $next.fadeIn("slow").addClass('active');
  
}, 3000);

CSS

#header-splats, #header-splats div {
   width: 106px;
   height: 106px;
}
/* overlap each other */
#header-splats div {
   position: absolute;
   top: 0;
   left: 0;
   display: none;
}
#header-splats div.active {display: block;}

This looks great in all browsers except IE, as you can see in these images:

THE SOLUTION: apply the following Microsoft filter in the CSS to each image (make sure you update the image path for each one).

CSS

#splat-1 img {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='/images/splats/splat1.png');}
#splat-2 img {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='/images/splats/splat2.png');}
#splat-3 img {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='/images/splats/splat3.png');}