如何使用jQuery将图标淡入较低的不透明度？

我有这些图标

<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调用图像。。。这够容易吗

您需要修复该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>

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

---

您需要修复该HTML以使用

类

属性。不能有多个元素具有相同的

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>

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

---

首先，不能有多个元素具有相同的

id

，因此

id=“icon”

应该变成

class=“icon”

，然后可以使用jQuery添加这些悬停函数：

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

---

其中，

fadeTo（）

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

首先，不能有多个元素具有相同的

id

，因此

id=“icon”

应该变成

class=“icon”

，然后可以使用jQuery添加这些悬停函数：

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

---

其中，

fadeTo（）

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

根据您的浏览器支持需要，您可以使用带有：悬停选择器的。不需要jQuery，在现代浏览器（Gecko、Webkit、Opera……可能是IE9，但我无法测试）

添加如下CSS：

img:hover{opacity:0.50;}

---

根据浏览器支持需要，您可以使用带有：悬停选择器的。不需要jQuery，在现代浏览器（Gecko、Webkit、Opera……可能是IE9，但我无法测试）

添加如下CSS：

img:hover{opacity:0.50;}

试试这个：

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

试试这个：

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

---

谢谢你的回答，但它不起作用：（你能在roseanneconner.tumblr.com上查看一下吗。我真的不知道为什么它没有正确地显示所有内容。我确保将每个id更改为类。不，它们仍然有

id=“photoSmall”

。你可以尝试在

$（）

选择器或将其更改为类。感谢您的回答，但它不起作用：（您可以在roseanneconner.tumblr.com上查看它。我真的不知道为什么它没有正确地显示所有内容。我确保将每个id更改为类。不，它们都有

id=“photoSmall”

仍然。您可以尝试在

$（）

选择器中使用该id，也可以将它们更改为类。应将停止添加到两个animate语句中，以停止多次触发动画效果。$（this）.stop（）.animate（{opacity:.5}）；.stop应添加到两个animate语句中，以停止多次触发动画效果。$（this）.stop（）.animate（{opacity:.5}）；