4
\$\begingroup\$

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>
\$\endgroup\$
4
\$\begingroup\$

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));
\$\endgroup\$
  • \$\begingroup\$ I've updated question, consol says that "$this.on is not a function", what's wrong ?? \$\endgroup\$ – gidzior May 30 '12 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 May 30 '12 at 14:55
  • \$\begingroup\$ it's almost working, i will put link to the example a little bit later \$\endgroup\$ – gidzior May 30 '12 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 May 30 '12 at 20:33
  • \$\begingroup\$ $this.stop(true, true) should be $this.find('img').stop(true, true). Fiddle here \$\endgroup\$ – Bill Barry May 30 '12 at 20:55
4
\$\begingroup\$

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>
\$\endgroup\$
  • \$\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 May 30 '12 at 8:36
  • \$\begingroup\$ i will test it and let you know how it goes \$\endgroup\$ – gidzior May 30 '12 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 May 30 '12 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 May 30 '12 at 15:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.