jQuery マウスオーバーしていない画像部分が薄くなるスクリプトのデモページ

Javascript

$(document).ready(function() {
    $('.imgArea').children().hover(function() {
        $(this).siblings().stop().fadeTo(500,0.5);
    }, function() {
        $(this).siblings().stop().fadeTo(500,1);
    });
});

XHTML

<ul class="imgArea">
<li><a href="image/001.jpg" title="サンプル1"><img src="image/001.jpg" alt="サンプル1" width="150" height="100" /></a></li>
<li><a href="image/002.jpg" title="サンプル2"><img src="image/002.jpg" alt="サンプル2" width="150" height="100" /></a></li>
<li><a href="image/003.jpg" title="サンプル3"><img src="image/003.jpg" alt="サンプル3" width="150" height="100" /></a></li>
<li><a href="image/004.jpg" title="サンプル4"><img src="image/004.jpg" alt="サンプル4" width="150" height="100" /></a></li>
<li><a href="image/005.jpg" title="サンプル5"><img src="image/005.jpg" alt="サンプル5" width="150" height="100" /></a></li>
</ul>

CSS

.imgArea	{ width: 100%; margin-bottom: 30px; }
.imgArea:after	{ height:0;	visibility: hidden;	content: ".";	display: block;	clear: both; }
.imgArea li	{ list-style-type: none; float: left; margin-right: 10px; }
.imgArea a	{
	display: block;
	width: 150px;
	border: 2px solid #CCC;
}
.imgArea a:hover	{ border: 2px solid #2D88B3; }