Internet Explorer, Transparent PNGs, and jQuery Animation: The Black Background Issue Solved

This is an issue I ran into a few months ago. I couldn't find much documentation around this on the interwebs, so I thought I'd post my findings here. Hope this helps a few people out.

I was working on a project where I was animating the opacity and position of transparent 24-bit  PNGs with jQuery. Everything was going great until I fired up IE (big surprise). I hadn't thought it would be a problem, since both IE 7 and IE 8 both support PNGs with alpha, but as it turns out, like most things in IE, it's a little buggy. 

Everything displayed properly at first, but the second I animated the opacity, this nasty black background/border/fringe junk showed up.

After much googling, one semi-solution I found was to give the image the same background color as your page with CSS. That's all well and good if your image is on a  solid background. If you give the image a background color or image, the PNG displays properly on top of it, BUT that background is still opaque, and that pretty much defeats the purpose.

THEN I remembered a RGBa to IE filter converter I had come across (thanks, Michael Bester). So I wondered what would happen if I gave my problem  PNGs a transparent background using an -ms-filter background converted from rgba(255,255,255,0). Fully expecting it not to work, I used the converter and tried this:

.item img { background: transparent; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE 8 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE 6 & 7 */ zoom: 1; }

Kazaam!! Goodbye black, and hello working, animatable transparent PNGs in IE 7 and 8.

You can now use jQuery's fadeIn(), fadeOut(), and animate() on your transparent PNGs in IE 7 and 8 to your heart's content.  Hope this saves you some time and frustration down the road.