Can this code be cleaned? Multiple objects triggering different hover events

Question

When the user visits the web page and hovers over an album artwork, the title of the piece and the artist name appears. It leaves when the mouse leaves. I have achieved this with the following code: HTML:

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

JQuery

 $(document).ready(function () {
 $("img#pic1").hover(
 function () {
 $("div.info1").animate({
 'opacity': 1
 });
 },
 function () {
 $("div.info1").animate({
 'opacity': 0
 });
 });
});
$(document).ready(function () {
 $("img#pic2").hover(
 function () {
 $("div.info2").animate({
 'opacity': 1
 });
 },
 function () {
 $("div.info2").animate({
 'opacity': 0
 });
 });
 });

The problem is with the javascript; I have to manually add new parts when I add a new image and it takes up a lot of space. Is there a way to condense the code?

CSS: .info1, .info2 { opacity:0; }

http://jsfiddle.net/burntember/22grA/

Answer 1

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.

Answer 2

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