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:

<img id="pic1" class="album" src=" ">
<div>
    <div class="name">artist</div>
    <div class="songname">song title</div>
</div>
<img id="pic2" class="album" src=" ">
<div>
    <div class="name">artist</div>
    <div class="songname">song2</div>
</div>

$(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:

<img id="pic1" class="album" src=" ">
<img id="pic2" class="album" src=" ">

<div data-img-id="pic1">
    <div class="name">artist</div>
    <div class="songname">song title</div>
</div>

<div data-img-id="pic2">
    <div class="name">artist</div>
    <div class="songname">song2</div>
</div>

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.

My approach will be like this:

html:

<div class="gallery">
    <img src=" " />
    <div class="info">
        <div class="name">artist-1</div>
        <div class="songname">song title-1</div>
    </div>
</div>
<div class="gallery">
    <img src=" " />
    <div class="info">
        <div class="name">artist-2</div>
        <div class="songname">song title-2</div>
    </div>
</div>

js:

$(document).ready(function () {
    $(".gallery").each(function () {
        var $gallery = $(this);
        var $info = $gallery.find(".info");

        $gallery.find("img").hover(function () {
            $info.animate({
                'opacity': 1
            });
        }, function () {
            $info.animate({
                'opacity': 0
            });
        });
    });

});

1. make a component(not a loose tag) in HTML
2. jQuery defined the behave of component (everything belongs to the component works only under this component).

jsfiddle:normal version

there are plugin version of this code, which could be more genetic:

  (function ($) {
    $.fn.gallery = function () {
        return this.each(function () {
            var $gallery = $(this);
            var $info = $gallery.find(".info");

            $gallery.find("img").hover(function () {
                $info.animate({
                    'opacity': 1
                });
            }, function () {
                $info.animate({
                    'opacity': 0
                });
            });
        });

    }

})(jQuery)

use this plugin like:

$(document).ready(function () {
    $(".gallery").gallery();
});

jsfiddle: plugin version