悬停时动画不透明度（jQuery）

Posted 2023-03-06

【中文标题】悬停时动画不透明度（jQuery）

【英文标题】：Animate opacity on hover (jQuery)

【发布时间】：2011-01-08 19:20:44

【问题描述】：

我们有一个链接：

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

当链接悬停时，我们想通过一些动画来改变<span> 的不透明度。

我们该怎么做？

【参考方案1】：

像这样：

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

【参考方案2】：

另一种可能的解决方案：

$("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); 
);

【讨论】：

您的选择器错误 - 他希望在链接悬停时出现效果，而不是跨度。不过，你说得有道理。

【参考方案3】：

使用.fadeTo():

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

演示：见fiddle

【讨论】：

您的原始逻辑仍然传达。 +1