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

公開日: : 最終更新日:2015/12/18 作業効率化

途切れたボタン画像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を使ってみたけど、上手くできなかった!という方は上記のやり方でリトライしてみてはいかがでしょうか。ご拝読いただき、ありがとうございました。

google ad

関連記事

ps_logo

webコーダー必見! 最新のフォトショでスライス作業が超捗る〜!

全国のwebコーダーの皆様、いかがお過ごしでしょうか?お忙しいでしょうか? 忙しい中だと、最新技術

記事を読む

google ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

PAGE TOP ↑