JQuery link hover effect code condensing

Question

I am wondering the method needed to condense these lines of code. Basically when you roll over an image, an image of text below it fades in and out.

        $("#2").hover(function(){
            $('#two').stop().animate({"opacity": 1}, 600);
        },function(){
            $('#two').stop().animate({"opacity": 0}, 600);
        });
        $("#4").hover(function(){
            $('#one').stop().animate({"opacity": 1}, 600);
        },function(){
            $('#one').stop().animate({"opacity": 0}, 600);
        });
        $("#5").hover(function(){
            $('#three').stop().animate({"opacity": 1}, 600);
        },function(){
            $('#three').stop().animate({"opacity": 0}, 600);
        });
        $("#6").hover(function(){
            $('#four').stop().animate({"opacity": 1}, 600);
        },function(){
            $('#four').stop().animate({"opacity": 0}, 600);
        });

Thank you greatly in advance!

Can you add your HTML as well please? It will be easier to answer knowing a bit more about your markup. — andyb, Apr 10 '11 at 18:46
What're the rules defining which element affects which other elements? Please post your mark-up. As it is, this doesn't seem to make a lot of sense. Or, at the very least, post a link to a [JS Fiddle demo](http://jsfiddle.net/). — David says reinstate Monica, Apr 10 '11 at 18:52
I tried to edit the post, and add more code but it gave me an anti-spam error regarding new users posting images. I was not trying to post an image so at a bit of a loss... — Ryan Haywood, Apr 10 '11 at 19:00

score 3 · Answer 1 · edited May 23 '17 at 12:19

The relationship between the hovered thing and that animated thing looks a bit random so you'll probably have to use a simple mapping table for that.

var id_map = {
    '2': 'two',
    '4': 'one',
    '5': 'three',
    '6': 'four'
};

$('#2, #4, #5, #6').hover(
    function() { $('#' + id_map[this.id]).stop().animate({opacity: 1}, 600); },
    function() { $('#' + id_map[this.id]).stop().animate({opacity: 0}, 600); }
);

You could also put the id_map on the source elements using data attributes. The HTML would look something like this:

<div id="2" data-target="two"  >...</div>
<div id="4" data-target="one"  >...</div>
<div id="5" data-target="three">...</div>
<div id="6" data-target="four" >...</div>

And the jQuery:

$('#2, #4, #5, #6').hover(
    function() { $('#' + $(this).data('target')).stop().animate({opacity: 1}, 600); },
    function() { $('#' + $(this).data('target')).stop().animate({opacity: 0}, 600); }
);

If you attach a class to the #2, #4, ... elements then you can simplify the selector:

$('.someClass').hover(
    function() { $('#' + $(this).data('target')).stop().animate({opacity: 1}, 600); },
    function() { $('#' + $(this).data('target')).stop().animate({opacity: 0}, 600); }
);

BTW, using all numeric id attributes is a bad idea, they should begin with a letter.

Thank you! Yes my practices are horrid- I am such a novice. While the original answer worked, I was hoping for a solution like this where I could pair elements together and call on them later. Knowing this exists will help more broadly down the road. Thank you! — Ryan Haywood, Apr 12 '11 at 04:12

Andrew Marshall · Accepted Answer · 2011-04-10T19:17:59.987

2

If you give each of the applicable HTML elements a class, e.g. <img class="fade-on-hover" />, then you could do:

 $(".fade-on-hover").hover(function(){
    $(this).stop().animate({"opacity": 1}, 600);
 },function(){
    $(this).stop().animate({"opacity": 0}, 600);
 });

EDIT:

I originally missed that you weren't fading the images themselves, so if you're using HTML5 and jQuery 1.4.3 or later, you can do the following:

HTML:

 <img id="image-one" class="fade-on-hover" data-hoverelement="text-one" />

Javascript:

 $(".fade-on-hover").hover(function(){
    $('#' + $(this).data('hoverelement')).stop().animate({"opacity": 1}, 600);
 },function(){
    $('#' + $(this).data('hoverelement')).stop().animate({"opacity": 0}, 600);
 });

edited Apr 10 '11 at 19:17

answered Apr 10 '11 at 18:49

Andrew Marshall

89,426
20
208
208

I would also recommend using delegate() to improve performance. e.g. $("body").delegate(".fade-on-hover", "hover", function(){ ... – jmans Apr 10 '11 at 18:59
1

@jmans [`delegate()`](http://api.jquery.com/delegate/) doesn't have the same behavior as what the OP posted. – Andrew Marshall Apr 10 '11 at 19:01
I am looking for a condensing method such as this. I think the problem is that the element that fades is different for each hover, so I can't use 'this'. – Ryan Haywood Apr 10 '11 at 19:01
@Ryan `this` refers to the individual element that was hovered over, not all the elements. – Andrew Marshall Apr 10 '11 at 19:02
@Andrew Ok. Nothing happens to the element being hovered over. It just triggers another elements visibility. So the original code I posted works, it is just repetitive. Bascially, when this icon is hovered over, fade in the text below it, when hovered out fade the text below it back out. there are 4 different icons. There could be no way to condense it further, I really appreciate the help though. – Ryan Haywood Apr 10 '11 at 19:10
@Ryan ohhh I see, I missed that originally. If you're using HTML5 (or if you aren't and don't mind having invalid HTML), you could give each element a `data-hoverhide` attribute to store the element that should be hovered, and then access that in the jQuery. – Andrew Marshall Apr 10 '11 at 19:12
Yea that sounds about right, will learn how to implement it. Thank you! – Ryan Haywood Apr 10 '11 at 19:20

JQuery link hover effect code condensing

2 Answers2