Edited at

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

More than 3 years have passed since last update.

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);