ITTI STAFF
BLOG

イッティWEBスタッフの制作ブログ

リンク文字、背景の色をアニメーションするjQuery

リンクの背景、文字をフェードによるエフェクトをかける場合、プログレッシブ・エンハンスメントならCSS3で、IEにも対応させる場合は、jquery.color.jsを利用するか、またはIE9.jsを利用します。

このブログでも、リンクの背景や、リンクテキストの色を変更させる時に、フェードで色を変えるエフェクトを使用していますが、プログレッシブ・エンハンスメントとしてCSS3のtransitionでエフェクトするのが一般的で簡単ですね。

でも「IEでもお願い」された場合は、jQuery UIを使ってIEでもtransition効果を使うことができます。

HTML

「jQueryUI」ファイルを読み込みます。
Google APIsでも公開されているjQuery UIを読み込むと良いでしょう。

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.6/jquery-ui.min.js" type="text/javascript"></script>

java script

背景色、テキストカラーを変更するセレクターをjavascriptに追加します。

$(document).ready(function(){
 // 背景を変更
 $("#footer a").hover(function() {
 $(this).stop().animate({ backgroundColor: "#ececec" }, 200); // ホバーで変わる色
 },function() {
 $(this).stop().animate({ backgroundColor: "#ffffff" }, 400);
 });
 // テキストを変更
 $("#header a, #footer-nav a").hover(function() {
 $(this).stop().animate({ color: "#663322" }, 200); // ホバーで変わる色
 },function() {
 $(this).stop().animate({ color: "#000000" }, 400);
 });
});

CSS3を利用する場合

IEを無視した場合、CSS3のトランジションを使ってエフェクトをかけます。

.test a{
	background-color: #ffffff;
	color: #000;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}
.test a:hover {
	background-color: #f2d849;
	color: #FFF;
}

CSS3の場合、IE9.jsを読み込んでトランジション効果をIEでも可能にする方法もありますね。
header内にIE9.jsを読み込みこんで、CSS3のトランジション効果を使います。

<!--[if lt IE 9]<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js">![endif]-->

新しい記事

東京のWEB制作会社イッティ