フォーカスした以外の要素の透明度を変える

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

上記サンプルの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(ミリ秒,透明度);
なので、数値を変えると変化する秒数、透明度を変えることが出来ます。

Google曰く、関連すると思われる広告