opacity

フォーカスしていない要素の透明度を変える。

上記サンプルのhtmlは、

<ul class="fade">
<li><a href="#"><img src="img/01.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/02.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/03.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/04.jpg" alt="" /></a></li>
</ul>

普通に画像を並べる。

ここでは、クラス名 fadeをつけました。

あとは、jQueryを読み込み

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function() {
 $('.fade').children().hover(function() {
 $(this).siblings().stop().fadeTo(500,0.5);
 }, function() {
 $(this).siblings().stop().fadeTo(500,1);
 });
});
</script>

このように書くと、上記サンプルのようにフォーカスされていない要素の透明度が変わります。
fadeTo(ミリ秒,透明度);
なので、数値を変えると変化する秒数、透明度を変えることが出来ます。

昨日、ナビゲーションを画像置換で表示させてじわっとロールオーバーするjsを紹介しました。
今回は、別のナビゲーションロールオーバー（じわっと）の方法です。

まずhtml

<div id="nav">
<ul>
<li><a href="#"><img src="img/nav01.jpg" alt="home" width="160" height="41" /></a></li>
<li><a href="#"><img src="img/nav02.jpg" alt="サービス内容" width="160" height="41" /></a></li>
</ul>
</div>

画像置換でなく、画像をそのまま表示させて・・・
css

#nav {
	background:url(img/nav-bg.jpg) no-repeat left top;
	width:320px;
	height:41px;
}
#nav li {
	float:left;
	width:160px;
	list-style:none;
}
a img {
	border:none;
}

liをよこにならべて、背景にロールオーバー時の画像を表示させました。

あとは、jQueryを読み込んで・・・

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#nav li img").hover(function(){
 $(this).fadeTo(300,0);
 },
 function(){
 $(this).fadeTo(300,1);
 });
});
</script>

と書くと、#nav li imgがhoverしたとき、画像が300ミリ秒で透明度0（完全に透明）になり、結果背景に置いた画像が表示されます。
また、マウスが外れると300ミリ秒で透明度が1に戻ります。
fadeTo(ミリ秒,透明度);
なので、値を変えると変化も変わります。
たとえば、背景画像を作らずに、透明度を0.8位にすれば、画像を2枚作る手間も省けて、ロールオーバーを表現できます。
scriptは、適当な名前をつけて外部に出して大丈夫です。