jQuery链接与下滚图像

Question

我试图将.animate放在一个函数中，以便在将鼠标悬停在图像上时显示更多图像。到目前为止，我只设法滚动整个div元素，不知怎的，我无法弄清楚如何与每个单独的图像交谈。这就是我所拥有的。

HTML：

<div class="social">
     <a href="#" target="_blank"><img src="xxx" alt="xxx"></a>
     <a href="#" target="_blank"><img src="xxx" alt="xxx"></a>
     <a href="#" target="_blank"><img src="xxx" alt="xxx"></a>
</div>

CSS：

.social{
     position: fixed;
     top: -91px;
     right: 10%;
}
.social img{
     width: 25px;
     margin: 0 5px 0 0;
}

javaScript / jQuery（如果我将$（＆＃39; .social a img＆＃39;）更改为$（＆＃39; .social＆＃39;），则有效）：

$(document).ready(function () {
     $('.social a img').hover(function ( ){
          $(this).animate({top:'0px'});
     });
});