Geek Answers Handbook

JQuery hover fadeIn fadeOut problem

I just returned to html, javascript and jquery, and I'm a little rusty. I basically did objective-c for a while, and returning to jquery is a bit tricky. I am trying to use jQuery fadeIn and the fadeOut bit, but it doesn’t work for some reason ... Here are the html and js that I worked on:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"> function showImg(2img) { $(2img).fadeIn('slow', function() { // Animation complete }); } function hideImg(2img) { $(2img).fadeOut('slow', function() { // Animation complete }); } </script> <body> <table width="1659" height="701" border="0" align="center"> <tr> <th width="325" scope="col"><div style="position: relative; left: 0; top: 0;"><img id="img1" src="" width="232" height="232" alt="" onmouseover="showimg(2img1)" onmouseout="hideimg(2img1)" style="position: relative; top: 0; left: 0;"/> <img id="2img1" src="" width="32" height="32" alt="" style="position: absolute; top: 100px; left: 150px; visibility:hidden;"/></div></th> <th width="325" scope="col"><div style="position: relative; left: 0; top: 0;"><img id="img2" src="" width="232" height="232" alt="" onmouseover="showimg(2img2)" onmouseout="hideimg(2img2)" style="position: relative; top: 0; left: 0;"/> <img id="2img2" src="" width="32" height="32" alt="" style="position: absolute; top: 100px; left: 150px; visibility:hidden;"/></div></th> <th width="325" scope="col"><div style="position: relative; left: 0; top: 0;"><img id="img3" src="" width="232" height="232" alt="" onmouseover="showimg(2img3)" onmouseout="hideimg(2img3)" style="position: relative; top: 0; left: 0;"/> <img id="2img3" src="" width="32" height="32" alt="" style="position: absolute; top: 100px; left: 150px; visibility:hidden;"/></div></th> <th width="325" scope="col"><div style="position: relative; left: 0; top: 0;"><img id="img4" src="" width="232" height="232" alt="" onmouseover="showimg(2img4)" onmouseout="hideimg(2img4)" style="position: relative; top: 0; left: 0;"/> <img id="2img4" src="" width="32" height="32" alt="" style="position: absolute; top: 100px; left: 150px; visibility:hidden;"/></div></th> <th width="325" scope="col"><div style="position: relative; left: 0; top: 0;"><img id="img5" src="" width="232" height="232" alt="" onmouseover="showimg(2img5)" onmouseout="hideimg(2img5)" style="position: relative; top: 0; left: 0;"/> <img id="2img5" src="" width="32" height="32" alt="" style="position: absolute; top: 100px; left: 150px; visibility:hidden;"/></div></th> </tr> </table> </body>
+4
source share
4 answers

I think you would be better off doing this:

 $(function() { $('table > div > img:first').hover(function() { showImg($(this).next()); }, function() { hideImg($(this).next()); }); });

This way you will not copy the onmouseover and onmouseoout code into your html.

Errors in your code - No # so that the image id disappears, although it seems to work in chrome. I don't know if it will work properly in every browser, also function names do not have the same case.

+3
source

$(2img) should be $('#2img') and that it

+1
source

$ (2img) should be $ ('#' + 2img) and call a function like showImg ("2img2")

+1
source

Demo

 $('.tb td').each(function(){ $(this).find('img').wrapAll('<div />'); $('.tb td div').css({position:'relative'}); $(this).find('img:eq(1)').css({position:'absolute', left:'0px', top:'0px'}).hide(); }); $('.tb td div').hover(function(){ $(this).find('img:eq(1)').stop().fadeTo(400,1); },function(){ $(this).find('img:eq(1)').stop().fadeTo(400,0); });
0
source

More articles:


All Articles