zaKEY.net - WordPress・iPhoneなどのブログ -

コポキャラの岡崎邦彦(ザッキー)の情報サイト。WordPressやらEC CUBEやらiPhoneについての情報を書いていきます。

Javascript

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

投稿日:

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");'
                });
            }
        });
    }
});

zakey336x280

zakey336x280

-Javascript
-

関連記事

31dJentfpEL._SL160_

【JQuery】fadeinを使って要素を順番に出す方法

JQueryのfadeinを使用すれば要素をフェードインしながら出すことが可能です。 これを使って順番に出す方法です。 Javascriptはこんな感じです。 <script src=&quot …

31dJentfpEL._SL160_

【JQuery】CSSのclassを追加・削除する『 addClass() / removeClass() / toggleClass() 』

jQueryではCSSのclassを簡単に追加・削除することができます。 classを操作する場合は『 addClass() / removeClass() / toggleClass() 』を使いま …