【IE8】透過pngにopacityアニメ！jquery.belatedPNG.jsで画像がボヤける・切れる時の対処方法

IE8で透過PNG画像にopacityで半透明アニメーションをかけたい時、jquery.belatedPNG.jsが大変便利です。しかし上図のように画像がボヤけてしまい、また画像の端も切れてしまって途方に暮れた経験はないでしょうか？ページを読み込み直すと、直ることもあるのですが、はじめてページを見た人には同じように画像が崩れてしまいますので何とかしたいですよね。

そんな時、ちょっと手を加えることでこの現象を解消することが可能です！まずはjquery.belatedPNG.js使用の基本の形から見ていきましょう。

jquery.belatedPNG.jsをダウンロードします。
ダウンロード

jquery.belatedPNG.jsを所定の位置にアップロードし、下記のようにコーディングしていきましょう。

■js

■css

■html

さて、問題はここからです。jsにさらに1手間加えます。

■js

デモ

画像を含め、ページ全体が読み込まれるのを待ってから、fixPngしています。こうしないとpng画像やその他の要素のサイズが正常に取得できない為に画像がボヤけたり、切れたり、時にはボタンの表示位置がおかしくなる事もあるんですね。

いかがでしたか。
jquery.belatedPNG.jsを使ってみたけど、上手くできなかった！という方は上記のやり方でリトライしてみてはいかがでしょうか。ご拝読いただき、ありがとうございました。