problems with animate applied to each element of the id selection separately
<p>Hello and sorry if my english isn't good..</p>

<p>I'm studying Jquery for 4/5 days and I'm trying to use it in a page I made. I'm trying to create a very simple animation in which some attributes of the image with the id=#opacity change with the mouseover and then come back to normality with mouseleave.</p>

<p>Now.. with another #id as selector, (#p) in this case, every single image works properly changing its opacity when the mouse is over. If I erase the other selector just the first image works and the others don't. Probably it's a stupid question but I'm really new to jQuery.</p>

<p>Thank's a lot.</p>

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

<p>Here there is the html part with the images. </p>

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