悬停时动画不透明度 (jQuery)

我们有一个链接：

<a href="#">
    Some text
    <span style="width: 50px; height: 50px; background: url(image.png); overflow: hidden; opacity: 0;"></span>
</a>

我们想要改变的不透明度<span>当链接悬停时带有一些动画。

我们该怎么做呢？

另一种可能的解决方案：

$("a span").hover(function(){
    $(this).stop().animate({"opacity": 1});
},function(){
    $(this).stop().animate({"opacity": 0});
});

如果使用fadeOut()，span会塌陷，这样就不会了

EDIT

这要好得多：

$('a:has(span)').hover(function() { 
    $('span', this).stop().animate({"opacity": 1}); 
},function() { 
    $('span', this).stop().animate({"opacity": 0}); 
});