如何使用 jQuery 将图标淡化为较低的不透明度？答案

【问题标题】：How would I fade an icon to a lower opacity using jQuery?如何使用 jQuery 将图标淡化为较低的不透明度？
【发布时间】：2011-03-21 12:32:45
【问题描述】：

我有这组图标，

<div class="nav">
<a href="/ask" title=""><img id="icon"
src="http://static.tumblr.com/ctwb3zj/4KZlie2ck/08-chat.png"></a>
<a href="/random" title="Random"><img class="icon1" id="icon"    
src="http://static.tumblr.com/ctwb3zj/oOFlie27f/05-shuffle.png"></a>
<a href="/archive" title="Archive"><img id="icon"
src="http://static.tumblr.com/ctwb3zj/G1Glie23v/11-clock.png"></a>
</div>

当悬停时，我希望它们褪色到较低的不透明度。我不想使用 Javascript 调用图像......这很容易吗？

【问题讨论】：

标签： jquery html animation css

【解决方案1】：

您需要修复该 HTML 以使用 class 属性。不能有多个元素具有相同的id 属性。

<div class="nav">
<a href="/ask" title=""><img class="icon"
src="http://static.tumblr.com/ctwb3zj/4KZlie2ck/08-chat.png"></a>
<a href="/random" title="Random"><img id="icon1" class="icon"    
src="http://static.tumblr.com/ctwb3zj/oOFlie27f/05-shuffle.png"></a>
<a href="/archive" title="Archive"><img class="icon"
src="http://static.tumblr.com/ctwb3zj/G1Glie23v/11-clock.png"></a>
</div>

然后，使用这个 jQuery：

$('img.icon').hover(
    function() {
        console.log('hello');
        $(this).stop().animate({ opacity: 0.5 });
    },

    function() {
        $(this).stop().animate({ opacity: 1.0 });
    }
);

这将使图标在鼠标进入时设置为 50% 的不透明度，并在鼠标离开时恢复为 100%。

jsFiddle

【讨论】：

.stop 应该添加到两个动画语句中，以停止多次触发动画效果。 $(this).stop().animate({opacity: .5});

【解决方案2】：

试试这个：

$(function(){
    $('.icon').hover(function(){
        $(this).stop().fadeTo("slow", 0.4);
    }, function(){
        $(this).stop().fadeTo("slow", 1);
    });
});

【讨论】：

【解决方案3】：

首先，你不能有多个元素具有相同的id，所以id="icon"应该变成class="icon"，然后你可以使用jQuery添加这些悬停函数：

$('.icon').hover(function() {
    $(this).fadeTo(500, .3);
}, function() {
    $(this).fadeTo(300, 1);
});

fadeTo() 中的第一个数字是持续时间，第二个是不透明度，分别是悬停和取消悬停。

【讨论】：

感谢您的回答，但它不起作用 :( 你能在roseanneconner.tumblr.com 上查看一下吗。老实说，我不知道为什么它的所有内容都不正确。我确定将每个 id 更改为 class。
不，他们都有id="photoSmall"。您可以尝试在 $() 选择器中使用该 id 或将它们更改为类。

【解决方案4】：

根据您的浏览器支持需求，您可以使用 CSS3 opacity 和 :hover 选择器。不需要 jQuery，在现代浏览器（Gecko、Webkit、Opera...也许是 IE9，但我无法测试）中运行良好。

像这样添加 CSS：

img:hover{opacity:0.50;}

【讨论】：