Showing different icons on hover

Question

I have 30 icons, and after hover, different icons are shown. How can I write this shorter?

jQuery

$('#iconTech01').hover(
        function() {
            $('#iconTechBig01').stop(true, true).fadeIn("slow");
            $('#iconTech01 img').stop(true, true).fadeOut("slow");
        },
        function() {
            $('#iconTechBig01').stop(true, true).fadeOut("slow");
            $('#iconTech01 img').stop(true, true).fadeIn("slow");
    });

    $('#iconTech02').hover(
        function() {
            $('#iconTechBig02').stop(true, true).fadeIn("slow");
            $('#iconTech02 img').stop(true, true).fadeOut("slow");
        },
        function() {
            $('#iconTechBig02').stop(true, true).fadeOut("slow");
            $('#iconTech02 img').stop(true, true).fadeIn("slow");
    });

    $('#iconTech03').hover(
        function() {
            $('#iconTechBig03').stop(true, true).fadeIn("slow");
            $('#iconTech03 img').stop(true, true).fadeOut("slow");
        },
        function() {
            $('#iconTechBig03').stop(true, true).fadeOut("slow");
            $('#iconTech03 img').stop(true, true).fadeIn("slow");
    });

    $('#iconTech04').hover(
        function() {
            $('#iconTechBig04').stop(true, true).fadeIn("slow");
            $('#iconTech04 img').stop(true, true).fadeOut("slow");
        },
        function() {
            $('#iconTechBig04').stop(true, true).fadeOut("slow");
            $('#iconTech04 img').stop(true, true).fadeIn("slow");
    });

    $('#iconTech05').hover(
        function() {
            $('#iconTechBig05').stop(true, true).fadeIn("slow");
            $('#iconTech05 img').stop(true, true).fadeOut("slow");
        },
        function() {
            $('#iconTechBig05').stop(true, true).fadeOut("slow");
            $('#iconTech05 img').stop(true, true).fadeIn("slow");
    });

HTML

<div id="iconWraper">
    <div id="iconTech01" class="icon"><img src="img/icons/tech/tech01.png" alt="icon 01" /></div>
    <div id="iconTech02" class="icon"><img src="img/icons/tech/tech02.png" alt="icon 02" /></div>
    <div id="iconTech03" class="icon"><img src="img/icons/tech/tech03.png" alt="icon 03" /></div>
    <div id="iconTech04" class="icon"><img src="img/icons/tech/tech04.png" alt="icon 04" /></div>
</div>
<div id="iconTechBig01" class="iconBig"><img src="img/icons/tech/tech01Big.png" alt="ikona 01" /></div>                             
<div id="iconTechBig02" class="iconBig"><img src="img/icons/tech/tech02Big.png" alt="ikona 02" /></div>
<div id="iconTechBig03" class="iconBig"><img src="img/icons/tech/tech03Big.png" alt="ikona 02" /></div>
<div id="iconTechBig04" class="iconBig"><img src="img/icons/tech/tech04Big.png" alt="ikona 02" /></div>

Bill Barry · Accepted Answer · 2012-05-30 20:55:33Z

4

Overall it could be written like this, assuming we could write a suitable getBigHere function:

$('.icon').each(function () {
    var $this = $(this),
        $big = getBigHere($this);
    $this.on({
        mouseenter: function () {
            $this.find('img').stop(true, true).fadeOut('slow');
            $big.stop(true, true).fadeIn('slow');
        },
        mouseleave: function () {
            $big.stop(true, true).fadeOut('slow');
            $this.find('img').stop(true, true).fadeIn('slow');
        }
    });
});

So the question is how can that function be written?

If you can alter the html, you could add a data-for attribute (or something like that) to the div tags with the ids of the big div tags:

<div id="iconWraper">
    <div id="iconTech01" class="icon" data-for="iconTechBig01">...</div>
    ...
</div>
<div id="iconTechBig01" class="iconBig">...</div>                             
...

Then:

function getBigHere($t) { return $('#' + $t.data('for')); }

Otherwise we need to get a little messy:

function getBigHere($t) { return $('#iconTechBig' + $t.attr('id').slice(-2)); }

Fortunately the second can be inlined nicely:

$('.icon').each(function () {
    var $this = $(this),
        $big = $('#iconTechBig' + this.id.slice(-2));

edited May 30, 2012 at 20:55

answered May 30, 2012 at 13:31

Bill Barry

2,31614 silver badges18 bronze badges

\$\begingroup\$ I've updated question, consol says that "$this.on is not a function", what's wrong ?? \$\endgroup\$

gidzior
– gidzior

2012-05-30 14:25:39 +00:00
Commented May 30, 2012 at 14:25
1

\$\begingroup\$ What version of jQuery are you using? .on was added in 1.7; if you are using an older version you can use .hover instead. \$\endgroup\$

Bill Barry
– Bill Barry

2012-05-30 14:55:40 +00:00
Commented May 30, 2012 at 14:55
\$\begingroup\$ it's almost working, i will put link to the example a little bit later \$\endgroup\$

gidzior
– gidzior

2012-05-30 15:07:33 +00:00
Commented May 30, 2012 at 15:07
\$\begingroup\$ well this is the long version gidzior.net/hover/project.html and this is the new one gidzior.net/hover/projectNew.html there is something wrong \$\endgroup\$

gidzior
– gidzior

2012-05-30 20:33:20 +00:00
Commented May 30, 2012 at 20:33
\$\begingroup\$ $this.stop(true, true) should be $this.find('img').stop(true, true). Fiddle here \$\endgroup\$

Bill Barry
– Bill Barry

2012-05-30 20:55:00 +00:00
Commented May 30, 2012 at 20:55

| Show 1 more comment

Sacred Socks · Accepted Answer · 2012-05-29 17:22:26Z

4

Certainly, assign a class to each tech icon (I'm assuming they're divs), use a JQuery selector to select all DOM element with the assigned class and then use each() to step through each item.

<div class="icon" id="iconTech01"><img ..../></div>
<div class="icon" id="iconTech02"><img ..../></div>
<div class="icon" id="iconTech03"><img ..../></div>

<script type="text/javascript">
$('.icon').each(function () {
    $(this).hover(
        function () {
            $(this).stop(true, true).fadeIn("slow");
        },
        function () {
            $('img', this).stop(true, true).fadeOut("slow");
        }
    );
});
</script>

edited May 29, 2012 at 17:22

answered May 29, 2012 at 15:25

Sacred Socks

1412 bronze badges

\$\begingroup\$ I think you can do directly $('.icon').hover(function () { });, or the modern version: $('.icon').on('hover', function () {}); - but one would need to test it. \$\endgroup\$

ANeves
– ANeves

2012-05-30 08:36:28 +00:00
Commented May 30, 2012 at 8:36
\$\begingroup\$ i will test it and let you know how it goes \$\endgroup\$

gidzior
– gidzior

2012-05-30 09:14:29 +00:00
Commented May 30, 2012 at 9:14
\$\begingroup\$ i've added html code, there are iconTechxx and iconTechBigxx and on hover iconTechxx is fadeout and iconTechBigxx is fadein, example that Sacred Socks wrote it's obvious, my problem is slightly more complex \$\endgroup\$

gidzior
– gidzior

2012-05-30 09:37:48 +00:00
Commented May 30, 2012 at 9:37
\$\begingroup\$ hey gidzior, sorry i'm a little bit confused as to what you're trying to do - are you trying to build scroll over icons like on Mac OS? \$\endgroup\$

Sacred Socks
– Sacred Socks

2012-05-30 15:04:23 +00:00
Commented May 30, 2012 at 15:04

Add a comment |

Stack Exchange Network

Showing different icons on hover

2 Answers 2

You must log in to answer this question.

Hot Network Questions

Showing different icons on hover

2 Answers 2

You must log in to answer this question.

Related

Hot Network Questions