Why does graphics have ugly black borders in IE after alpha animation?

The site I'm working on opens with a fancy jQuery opacity animation. Currentl开发者_开发技巧y It's working in all browsers, but in IE all text and alpha images are left with ugly black borders that makes the text practically unreadable.

Is there some clever javascript command i can run to refresh/update the graphics? Any other way to fix this?

My problem is entirely css and javascript related, so all source code can be found following the link.

Thanks for any help!

http://xistence.org/dev/

After an animation involving the opacity, you will want to clear the opacity value (back to a default of no value) to fix this mangled antialiasing in IE. Try this jQuery on the section in question after the animation is complete (e.g. in a callback):

$('.item').css('filter','');

This question probably has the answer you are looking for:

jquery cycle IE7 transparent png problem

from @darkoz's answer:

The way to get around this is to nest your png inside a container and then fade the container. Sort of like this:

<div id="fadeMe">
    <img src="transparent.png" alt="" />
</div>

This snippet of jQuery code has served me well when dealing with opacity issues in IE.

    $(function() {
        if (jQuery.browser.msie)
            $('img[src$=.png]').each(function() {
            this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+this.src+",sizingMethod='scale')";
        });
    })

1. Define a solid background color to your image:

    .container img {
         background-color: white;
    }

1. Define the background-image css property of your image to its src attribute:

    $('.holder-thumbs li a img').each(function() {
         $(this).css('background-image', $(this).attr('src'));
    });

Advantage: you don't need to change your markup

Disadvantage: sometimes applying a solid background color is not an acceptable solution. It normally is for me.