jQuery hover fadeIn淡出问题

jQuery hover fadeIn fadeOut problem

本文关键字：出问题 淡出 fadeIn hover jQuery      更新时间：2023-09-26

我刚刚回到html, javascript和jquery，我有点生疏。我用objective-c已经有一段时间了，回到jquery有点困难。我试图使用jQuery的fadeIn和fadeOut位，但它不工作的某种原因…这是我一直在做的html和js:

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

我想你会发现这样做更好:

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

这样你就不会在你的html中复制onmouseover和onmouseoout代码。

你的代码中的错误是-没有#图像的id褪色，虽然它似乎在chrome中工作，我不知道它是否会在每个浏览器中按预期工作，函数名称也没有相同的情况。

$(2img)应该是$('#2img')，就这样

$(2img)应该是$('#'+2img)，并且调用类似showImg("2img2")的函数

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);
});
相关文章：