CSS3＋IE対策にJavaScriptを併用

hover時のボタンの処理でよく使われるのが以下のような手法です。

• ボタンの画像を2枚用意してJavaScriptで切り替える
• CSS spriteでhover時の位置をずらしたりする

しかし、これだとマウスオーバーした瞬間に切り替わってしまいます。徐々に変化する方が自然に感じますし、洗練された印象を受けるのではないでしょうか。

今回ご紹介するのは、CSS3でアニメーションを使ってhover時にボタンの色を変化させる方法です。これにはtransitionプロパティを使うのですが、以下のようにIEが非対応という問題があります。

Windows

• Firefox 4.03 ○
• Safari 5 ○
• Chrome 7 ○
• Opera 10.63 ○
• IE 6 ×
• IE 7 ×
• IE 8 ×

Mac

• Firefox 3.6 ×
• Safari 5 ○
• Chrome 7 ○
• Opera 10.63 ○

そこで、JavaScriptを使った方法もあわせてご紹介します。

CSS3で実装するには

今回のサンプルの完成イメージは以下のとおりです。

まずはCSS3による実装方法です。

a img {
	-webkit-transition:opacity 0.25s; /*Safari,Chrome*/
	-o-transition	   :opacity 0.25s; /*Opera*/
	-moz-transition   :opacity 0.25s; /*Firefox*/
	transition		   :opacity 0.25s;
	background:#fff;
}
a:hover img {
	filter: alpha(opacity=70);
	-moz-opacity:0.70;
	opacity:0.70;
}

ポイントは2つです。

1つ目は、transitionプロパティを以下のようにブラウザごとに指定すること。

• -webkit-transition（Safari/Chrome用）
• -o-transition（Opera用）
• -moz-transition（mozilla系ブラウザ用）

「0.25s」は、「⁠transition-duration」の値で、0.25秒かけてアニメーションさせることを表します。

2つ目は、IE対策として、独自にopacity（透過度）を指定すること。

IEはtransitionによるアニメーションはしませんが、opacity指定はしておきます。

そのために、IEの独自拡張であるfilterプロパティを使用します。

jQueryのfadeTo()メソッドで透過度を変化させる

次はJavaScriptを使った実装方法です。

$(function() {
	$('a img').hover(
		function(){
			$(this).fadeTo(250, 0.7);
		},
		function(){
			$(this).fadeTo(250, 1);
		}
	);
});

ポイントは、jQueryのfadeTo()メソッドを使用して、hover時の透過度を変化させることです。fadeTo(250, 0.7)と指定し、250ミリ秒かけて、hover時に70％の透過度までアニメーションさせます。

なお、ここでは「a img」と書いていますが、「⁠a img.roll」のようにすることで、クラス指定したimgに対して指定することもできます（この場合はrollクラス⁠）⁠。

「Yahoo！JAPAN」がIE6のサポートを2010年12月中旬から順次終了していくとのアナウンスをしました。しかし、IE6の普及率はまだまだ高いため、JavaScriptを使用して表現するのが無難と言えます。

ただし、新しい技術を要件に対してうまく使っているとインパクトがあります。CSS3の動きは常にウォッチしておくといいでしょう。