Question

I am trying to animate opacity with Jquery an it is working fine in every browser except, you guess it dreaded IE8!
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 NOT 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 (much 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;

 }