How do I fix rough edges of text in Internet Explorer (IE7) with jQuery’s fadeIn() & fadeOut()?

You may have noticed some cruddy black dots surrounding text or what looks like a black outline or border when fading in and out with Internet Explorer 7. This is actually a bug but before you go crazy, here’s the fix.

Set the background color of the parent container with CSS.

Yep, it’s that easy.

ps. This issue is different from FireFox cleartype bug which displays thin, crunchy text.