【jQuery】IE8以下で透過PNGがfadeinで黒くなる場合の対処法

2014.03.27
2014.03.27
jQuery

IE7以下では透過PNGが使用できるようになりましたが、fadein等の動きをさせると透過してる部分が黒く表示される場合があります。
cssで対応できる場合もありますが、jQueryで一括対応することができます。
以下のコードをjQueryと共に記載します。

// for IE
jQuery(function() {
    if(navigator.userAgent.indexOf("MSIE") != -1) {
        jQuery('img').each(function() {
            if(jQuery(this).attr('src').indexOf('.png') != -1) {
                jQuery(this).css({
                    'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + jQuery(this).attr('src') + '", sizingMethod="scale");'
                });
            }
        });
    }
});

参考サイト：IE8以下で透過PNGが黒くなる場合の対処法

追記：2014年3月27日
このコードだとfadein以外の部分も動作してしまい、不具合があるので、下記がよいです。
変更した部分はimgを#selecter imgに変更しただけです。

// for IE
jQuery(function() {
    if(navigator.userAgent.indexOf("MSIE") != -1) {
        jQuery('#selecter img').each(function() {
            if(jQuery(this).attr('src').indexOf('.png') != -1) {
                jQuery(this).css({
                    'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + jQuery(this).attr('src') + '", sizingMethod="scale");'
                });
            }
        });
    }
});