悬停时使用jQuery动画控制透明度

Question

我们有一个链接：

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

当链接被悬停时，我们希望使用一些动画来改变 <span> 的不透明度。

我们该如何实现呢？

- Happy

Answer 1

另一种可能的解决方案:

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

如果你使用fadeOut()，那么这个span会折叠起来，这样它就不会显示了。

编辑

这样更好：

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

- Raspo

---

你的选择器有误 - 他希望在链接悬停时出现效果，而不是在 span 上。不过，你说得很对。 - SLaks

Answer 2

像这样：

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

- SLaks

Answer 3

Use .fadeTo():

$( 'a' ).hover(
    function() { $( this ).fadeTo( 'fast', '1'); },
    function() { $( this ).fadeTo( 'fast', '.4'); }
);

演示：查看fiddle

- Nabil Kadimi

---

您的原始逻辑仍然得以传达。+1 - Mr. Polywhirl