jQuery淡出悬停不起作用

Question

我正在尝试让鼠标悬停时图像有白色叠加。它似乎适用于jsfiddle http://jsfiddle.net/EqH4H/，但不适用于我的本地网站。图像保持不变，不会褪色。

这是我的HTML代码;

<div id="masonry_container" >

<div class="masonry_item">
<a href="http://storyville.jonmarkoff.com/storyvillewp"target="_blank">
<img src="images/storyville_home.png" alt="Storyville Entertainment"/>
<h3>Storyville Entertainment</h3>
<p>Development. jQuery hover effects.</p>
</a>
</div><!--masonry_item-->

</div>

CSS;

#masonry_container {
margin:0 auto 50px auto;
width:100%;
position:relative;
z-index:2001;
}

.masonry_item {
width:300px;
padding:20px;
}

.masonry_item:hover{ 
outline:1px solid white;
}

#masonry_container img {
width:100%;
background:white;
}

JS;

$(document).ready(function(){
$("#masonry_container img").hover(
function(){
    $(this).fadeTo(500, 0.5);
},
function(){
    $(this).fadeTo(500, 1);
});
});

感谢您的帮助。