2011-10-20

[jQuery] メニューの背景色をロールオーバーでふわっと変える

ナビゲーションメニューをロールオーバーしたときに、
背景色をjQueryでふわっと変える方法です。

ポイントはjQueryのanimate関数でstopを使うこと。
これを使用しないと、マウスポインタを何度もメニュー上で動かしたときに
それがすべて実行され、チラチラして気持ち悪いだけでなく、
マウスポインタを外してもすべて完了するまで動いてしまいます。


stopメソッドには引数が2つあり、メニューで背景色を変える場合には
true,trueもしくはfalse,trueにするのがいい感じでした。

◆デモページ

[Javascript]
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.color.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#navi li a").hover(function() {
    $(this).stop(true, false).animate({backgroundColor: "#BFA47D"}, 400);
  },function() {
    $(this).stop(true, false).animate({ backgroundColor: "#D2B48C"}, 400);
  });
});
</script>

[HTML]
<ul id="navi">
  <li id="navi1"><a href="1.html">NAVI1</a></li>
  <li id="navi2"><a href="2.html">NAVI2</a></li>
  <li id="navi3"><a href="3.html">NAVI3</a></li>
  <li id="navi4"><a href="4.html">NAVI4</a></li>
  <li id="navi5"><a href="5.html">NAVI5</a></li>
</ul>

[CSS]
ul#navi {
	margin:0 30px 0 0;
	padding:0;
	width:980px;
	height:50px;
	background:#000;
	border-left:1px solid #333;
	list-style:none;
}

ul#navi li {
	float:left;
	margin:0;
	padding:0;
	height:50px;
	border-right:1px solid #333;
}

ul#navi li a {
	display:block;
	padding:15px 10px;
	width:60px;
	height:20px;
	background-color:#000;
	text-align:center;
	font-family:verdana;
	color:#ccc;
	text-decoration:none;
}

Comment:

Trackback URL: