Jquery 分别应用于id选择的每个元素的动画问题

你好，如果我的英语不好，我很抱歉

我正在学习Jquery 4/5天，并试图在我制作的页面中使用它。我正在尝试创建一个非常简单的动画，其中id=#opacity的图像的一些属性会随着mouseover而改变，然后通过mouseleave恢复正常

现在。。使用另一个#id作为选择器，（#p）在本例中，当鼠标悬停时，每个图像都可以正确地改变其不透明度。如果我删除另一个选择器，只有第一个图像工作，其他图像不工作。也许这是一个愚蠢的问题，但我对jQuery真的很陌生

非常感谢

$(document).ready(function(){
        animazione();
    });

    function animazione() {

    var opacity = $('#opacity, #p');

    opacity.mouseover(function(){
        $(this).animate({
            opacity: '1.0',
        },350).mouseleave(function(){
            $(this).animate({
                opacity: '0.6',
            },200);
        });
    });
    }

这里是带有图像的html部分

<div class="container_5">
        <div class="grid_1">
            <a href="#">
                <img src="img/monitor.png" id="opacity" alt="monitor" class="ambits" style="margin-top: 80px;">
            </a>
        </div>
        <div class="grid_1">
            <a href="#">
                <img src="img/rulli.png" id="opacity" alt="rulli" class="ambits" style="margin-top: 75px;">
            </a>
        </div>
        <div class="grid_1">
            <a href="#">
                <img src="img/lucchetto.png" id="opacity" alt="lucchetto" class="ambits" style="margin-top: 100px;">
            </a>
        </div>
        <div class="grid_1">
            <a href="#">
                <img src="img/cuore.png" id="opacity" alt="cuore" class="ambits" style="margin-top: 100px;">
            </a>
        </div>
        <div class="grid_1">
            <a href="#">
                <img src="img/allest.png" id="opacity" alt="allestimento" class="ambits" style="margin-top: 90px;">
            </a>
        </div>
    </div>

---

HTML元素的

id

属性定义了该特定元素的唯一标识符，因此页面上每个

id

属性的值必须是唯一的。不能有多个具有

id=“opacity”

的元素，因为它是无效的HTML

当您使用

$（“#不透明度”）时，

jQuery在内部使用本机JavaScript

document.getElementById（）

函数，该函数将只选择一个具有指定

id

的元素（通常是DOM中的第一个，但我不确定是否有保证）

---

如果要将元素组合在一起并同时与所有元素交互，请使用

类

。

对于开始，每个元素只能使用一个ID。如果您希望有多个元素并对它们进行集体寻址，则应该为它们分配一个类名，而不是ID，或者在ID之外。ID对于每个元素都应该是唯一的，如果页面上有多个ID，则会出现意外行为