Jquery and IE8 animate opacity solution

Question

I am trying to animate opacity with Jquery an it is working fine in every browser except, you guess it dreaded ! ！
Problem: on animation I am seeing some ugly artifacts:(
I know that I can solve this by removing background and adding the same background color to my animated div and to my container div,but it is an option in my case. 一个选项。
Can somebody suggest solution to this? My code:

$(document).ready(function() {
    $(".img").animate({
        opacity: 0
    });
    $(".glow").click(function() {
        $(".img").animate({
            opacity: 1
        }, 5000);
    });
});

Answer 1

By adding IE filters to my CSS I have partially solved this issue ( better now and no black halo). 好多了，没有黑晕）。
Lost whole day with this so I hope it will help someone more fortunate than me:)

 .img{
 display:block;
 width:230px;
 height:300px;
 owerflow:hidden;
 position:relative;
 outline:none;

 /*Notice (ugly) IE filter here and Source to my PNG image */

 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=http://www.robertpeic.com/glow/glow.png) alpha(opacity=0);
 background:none;
 margin:0px auto;
 padding-top:10px;

 }

Answer 2

That's what you get when you change opacity of the images with alpha transparency in IE7 and IE8. There is another question about the same IE GIF/PNG Transparency issue with jQuery