悬停时的不透明度(jQuery)

Question

我们有一个链接:

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

<span>当链接悬停时,我们希望通过一些动画改变不透明度.

我们怎么做？

Answer 1

另一种可能的方案

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

如果你使用fadeOut(),跨度将崩溃,这样它就不会崩溃

编辑

这要好得多:

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

Answer 2

像这样:

$('a:has(span)').hover(
    function() { $('span', this).fadeIn(); },
    function() { $('span', this).fadeOut(); }
);