プロジェクションマッピング

エンターテインメントから工業利用まで、プロジェクションマッピングの活用・運用をお考えの方へ

more

インタラクティブ&サイネージ

情報表示用のデジタルサイネージから、センサーを利用したインタラクティブ要素などをお考えの方へ

more

VR/360MOVIE

VRHMD用コンテンツからプラットフォームを利用した360度ムービーを活用したPRをお考えの方へ

more
CONTACT 052-253-9866

jQueryでオンマウス時にボタンの画像をふわっと切り替えてみる!(IE8〜対応!)

2014.08.05 火曜日 07:38:38

tumblr_mq7ejb3POL1st5lhmo1_1280_01

Javascriptをより直感的に操作できるようになる、
超便利なライブラリのjQuery。
その中でも「fadeIn」「fadeOout」はUI、UXの面から見ても優れており
非常に使い勝手も良いメソッドです。

オンマウス時に画像を切り替えるのに使い勝手が良いのが「fadeTo」です。
fadeToはfadeOutと違い、display:noneの状態にならず、
Opacityのみ変化するので、マウスを乗せたままの状態に対応することが出来るのが
特徴の一つと言えると思います。

fadeToでオンマウス時に画像を切り替える

オンマウス時に、透過率を変化させて画像を切り替えるために
以下のように記述をしました。

Javascript

fadeTo(500 , 1)内の500はフェードするのにかかる時間、
1は、透過率なので、0なら透明になります。
HTMLとCSSは以下の様に書いてみました。

html

css

IEに対応させるために…

ただIE8が少し問題児でして、このままでは透過pngが透過してくれませんでした。
そこで結局、以下のように書き換えて、透過するようになりました。

CSSの指定では最初の表示でopacity:0が効かない為、
最初にjsで指定しました。
それから、要素をまとめて指定しても透過しないようだったので、
テキストと画像を別々に指定して透過させました。

Javascript

背景画像は別のspanで括って、imgで指定することにしました。

html

css

このような感じで、対応することができました。
IE6、7がサポートが外れて余り必要なくなってはきましたが、
IE8にはまだ悩まされる部分がありますね…

Category:Development , PHP/Javascript     Tag:
Authorブログの著者について
田中 義弘

田中 義弘

イベントプロダクション・グラフィックデザイナーを経て、2010年3月に株式会社アイデアクラウドを設立。近年、WEBから得た技術をベースに、プロジェクションマッピング事業をはじめとした先端事業をスタート。

Our Business
最近の記事
人気記事
Our Project