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>

Answer 1

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));

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

Answer 2

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>

• ANeves: I think you can do directly $('.icon').hover(function () { });, or the modern version: $('.icon').on('hover', function () {}); - but one would need to test it.
• gidzior: i will test it and let you know how it goes
• gidzior: 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
• Sacred Socks: 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?