IEで透過pngの”fadeIn()とfadeOut()”の表示(前回の追記)

前回かいた”スクロールで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>

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ 素材 jQueryプラグイン Facebook php 引っ越し お知らせ JavaScript CSS カテゴリー Shareボタン IE 投稿タイプ seo Photoshop HTML5 レスポンシブ サイドバー ナビゲーション タクソノミー WPセキュリティ Git カスタムメニュー Macアプリ PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能