memocarilog

前回かいた”スクロールでtopへ戻るボタンを表示するjQueryコード（スムーススクロール）”を使用してみた所、その他のブラウザでは問題なく表示できたのですが、IEでのみフェードインとアウトの時に背景が黒くなってしまうという現象がでました。

調べてみたら、IEでは透過pngの”fadeIn()とfadeOut()”には対応できてないようです。
参考記事：透過PNGのフェードイン／アウトが黒くなる（下の方にあります）

しかたないので、IEでは”show()”と”hide()”で表示するようにしました。
（画像がgifであれば問題なく表示できました）
他にもっといい方法はないでしょうか・・・

==================================

追記：こちらの記事”[IE7|IE8] jQueryのfadeIn/fadeOutした時にpng画像が変になる時のTips « Web 業界の技術屋 | VIVID Labs.”でIEのみAlphaImageLoaderを適用して黒くなるのを防ぐコードが公開されていました！

以下のコードを読み込むと透過PNGのfade時に黒くなりません。 $(‘img’) の箇所で透過pngを使っている要素を指定します。

<script type="text/javascript">
$(function() {
    if(navigator.userAgent.indexOf("MSIE") != -1) {
        $('img').each(function() {
            if($(this).attr('src').indexOf('.png') != -1) {
                $(this).css({
                    'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' +
                    $(this).attr('src') +
                    '", sizingMethod="scale");'
                });
            }
        });
    }
});
</script>