2013年6月5日水曜日

jQueryにてfadeIn()、fadeOut()をするときにIE8だと黒いのが出てしまう問題

  • このエントリーをはてなブックマークに追加

jQueryでアニメーションする際にはfadeIn()やfadeOut()と組み合わせたりする。
ちなみにfadeIn()やfadeOut()はopacityを変化させているんだけど、
IE7やIE8だとpng画像のopacity値を弄ってしまうと透明部分がぼわっと黒っぽくなってしまう。
もちろんこんな状態は気持ち悪いので直す方法を書いてみた。

$(function(e){
  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");'
        });
      }
    });
  }
})
IE7やIE8は特有のものを使わないと完全に透過pngを表示出来ないという罠があるのが厄介。
でももうIE10とか出てる時代なのに、IE8の対応をしないといけないっていうのも時代錯誤な気がするような。

ちなみにIE9ではCSS3のtransform 3Dが使えなかったりするので、
フリップみたいな感じにy軸を中心にクルっていうのは出来なかったり。
全く関係ないけど。
ブラウザ別CSS3対応状況を見てみると早いかも。

Adsense