jquery - problems with animate applied to each element of the id selection separately -

jquery - problems with animate applied to each element of the id selection separately -

hello , sorry if english language isn't good..

i'm studying jquery 4/5 days , i'm trying utilize in page made. i'm trying create simple animation in attributes of image id=#opacity alter mouseover , come normality mouseleave.

now.. #id selector, (#p) in case, every single image works changing opacity when mouse over. if erase other selector first image works , others don't. it's stupid question i'm new jquery.

thank's lot.

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

here there html part images.

<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>

the id attribute of html elements defines unique identifier specific element, values of every id attribute on page have unique. can't have multiple elements id="opacity" because it's invalid html.

when utilize $('#opacity') jquery internally uses native javascript document.getelementbyid() function, select 1 of elements specified id (generally first in dom, i'm not sure there's guarantee of that).

if want grouping elements , interact them @ 1 time, utilize class instead.

jquery