Fading PNGs in IE

In the previous examples, we've looked at fading in and out using CSS background colors to illustrate the effect. We could easily extend it to include background images instead, which generally work just as well, if not better, with this effect.

One thing to watch out for when using background images in conjunction with fading animations however is that problems can be encountered with the display of the images when the animations are viewed in Microsoft's Internet Explorer.

It is known as the black-border problem and causes a black aura to be displayed around the image when a PNG with alpha-transparency (semi-opacity) is used as the background image. It really only affects IE8 as there are work-arounds that can be used to fix ...

Get jQuery 1.4 Animation Techniques Beginner's Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.