jQuery: image transparency, animations and Internet Explorer

Internet Explorer still has some problems with jQuery animations and image transparency. When you animate an image by changing its opacity from transparent to opaque, IE shows a black outline that gradually disappears when the animation is complete. This problem affects all jQuery animations and effects, regardless of the image type. To fix this problem, you can write the following code:

function fixIETransparency(element) {
    var arr = new Array();
    $(element+' img').each( function(index) {
        arr[index] = new Image();
        arr[index].src = this.src;

        if ( $.browser.msie ) {
            this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(
enabled='true',
sizingMethod='image',src='"+ this.src +"')"; 
        }
    });

}

This function preloads all images within a given context and applies the alpha channel to them by using a proprietary Internet Explorer filter. You can use it as follows:

$(function() {


  fixIETransparency('#site');

});