Can this code be cleaned? Multiple objects triggering different hover events
In your hover method you want to select the next two divs after the img. Assuming that the divs are located (in DOM) immediately after the img, then you can select them using the jQuery .next() method, instead of selecting them by name.

ALso instead of selecting each img by id, you could give them all the same class, and then use a single jQuery selector to select every img with that class.

Untested and probably slightly buggy example code:

&lt;img id="pic1" class="album" src=" "&gt;
&lt;div&gt;
    &lt;div class="name"&gt;artist&lt;/div&gt;
    &lt;div class="songname"&gt;song title&lt;/div&gt;
&lt;/div&gt;
&lt;img id="pic2" class="album" src=" "&gt;
&lt;div&gt;
    &lt;div class="name"&gt;artist&lt;/div&gt;
    &lt;div class="songname"&gt;song2&lt;/div&gt;
&lt;/div&gt;

$(document).ready(function () {

    $("img.album").each().hover(

        $div = $(this).next(); // find the next element after this img

        function () {
            $div.animate({
                'opacity': 1
            });
        },

        function () {
            $div.animate({
                'opacity': 0
            });
        });
    });


If the div element is not immediately after the img (so you can't use the .next method), you can relate each div to its img by defining a new attribute which begins with data-, for example data-img-id:

&lt;img id="pic1" class="album" src=" "&gt;
&lt;img id="pic2" class="album" src=" "&gt;

&lt;div data-img-id="pic1"&gt;
    &lt;div class="name"&gt;artist&lt;/div&gt;
    &lt;div class="songname"&gt;song title&lt;/div&gt;
&lt;/div&gt;

&lt;div data-img-id="pic2"&gt;
    &lt;div class="name"&gt;artist&lt;/div&gt;
    &lt;div class="songname"&gt;song2&lt;/div&gt;
&lt;/div&gt;


Then, in your general-purpose hover method, you can get the id of the this img tag, and use that id value to select the corresponding div using its data-img-id element.