jstarted.com
JavaScript/HTML/CSSのノウハウや覚書を掲載するブログ
2012.11.14

擬似的にクロスフェードするマウスオン効果を実装する

Category:

jqueryを覚えたての頃に、とにかくなんでもアニメーションさせてみたいと考えるのは僕だけじゃないと思います。その流れで、マウスオン効果についても少し工夫をしてみたくなりました。ただ味気なく画像を切替えるという従来のものではなく、画像がクロスフェードで切り替わるものを作ってみようと思いました。

これが簡単には出来なかったのですが、いくつかの方法を試したうえ、cssと組み合わせて行う方法を考えました。実際にはクロスフェードしているように見える擬似的なものですが、多少の汎用性も考慮して書いてみました。まず、jsは以下のとおりです。

//マウスオン効果を実装したいimg要素を変数に格納する。
var btn = ".btn a img";

//対象のimgのマウスオン時の画像を生成する。
//生成した画像は別途cssで、オフ時の画像に隠れるよう絶対配置しておく。
$(btn).each(function(){
	$(this).addClass("mouseout");
	var img = {
		src : $(this).attr("src").replace(/^(.+)(\..+)$/,"$1_ov$2"),
		alt : $(this).attr("alt")
	};
	$(this).parent().append("<img src='" + img["src"] + "' alt='" + img["alt"] + "' class='mouseon'>");
});

//マウスオンのイベント。オフ時の画像をfadeOutして擬似的にクロスフェードして見せる。
var fadeSpeed = 150;
$(btn + ".mouseout").mouseover(function(){
	$(this).stop().fadeTo(fadeSpeed,0);
}).mouseleave(function(){
	$(this).stop().fadeTo(fadeSpeed,1);
});
あわせて指定するcssは、以下のように記載します。
//imgを囲むaタグをblock要素に変換。また相対配置にし、絶対配置するimgの起点にする。
.btn a {
	width: 200px;
	height: 40px;
	display: block;
	position: relative;
	margin: 0 auto;
}

//オフ・オン画像とも絶対配置する。
.btn a img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

//オン画像がオフ画像の後ろに隠れるようz-indexを調整。
.btn a img.mouseon {
	z-index: 1;
}

動作のデモはこちら
フェードインするロールオーバー - js do it

each()でページ内のすべての指定要素を拾えるようにしてみたものの、imgを絶対配置するためにaタグをブロック要素に変更する都合上、ボタンの縦横幅を逐一cssに記載しなければならず、単純なマウスオンよりも汎用性は下がってしまいました。

cssもjsで指定するように変更しつつ、jsがオフの場合もボタンが正確に配置されるように手を加えるのが、今後の課題と思います。

jstarted.comはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を
獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、
Amazonアソシエイト・プログラムの参加者です。

クリエイティブ・コモンズ・ライセンス
jstarted.com by yoichi kobayashi is licensed under a Creative Commons 表示 3.0 非移植 License.