IE8 で 透過PNG に jQuery で フェード効果 をかけた際、透過部分が黒くなった場合の対処法

IE8 の場合だけ直接画像に対して以下の JavaScript が動作すようにする。
実際使うときは$( 'img.png' ) のようにクラスを当てて PNG 画像のみに効くようにさせる。

//Javascript
$( 'img' ).each(function(){
	$( this ).css({
		'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + $( this ).attr( 'src' ) + '", sizingMethod="scale");'
	});
});

---

実装時の注意
次のようなHTMLがあったとして

<div class="img_wrap">
	<img src="Logo.png" class="png">
</div>

フェード効果をかける場合は次のように PNG画像 を囲っている要素 ( 上の場合 div ) にあてるとキレイにフェードしてくれます。

//Javascript
$( 'img_wrap' ).fadeIn(10000);

---

次のようにすると効果がなくなる

1.CSSで画像に position: absolute をあてている場合。

img{
	position: absolute;
}

2.フェード効果を加える対象(ここでは div )の子要素に position: absolute をあてている要素が含まれる場合。
フェードする際だけJavaScriptで absolute のあたっている子要素を static に変更するなどすると解決する。

<div>
	<p>
		<img src="Logo.png" class="png">
	</p>
</div>

div{
	/*いろいろ*/
}
p{
	position: absolute;
}

3.フェード効果を画像に直接かける

//Javascript
$( 'img' ).fadeIn(10000);