jquery - 我如何使用 jQuery 将图标淡化为较低的不透明度？

Question

我有这些图标集，

<div class="nav">
<a href="/ask" title="Ask Question"><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 调用图像...这够简单吗？

Answer 1

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

<div class="nav">
<a href="/ask" title="Ask Question"><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