logo标签列表

jQuery悬停淡入淡出问题

javascriptjqueryhtml
4

我刚回到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>
4个回答
3

我认为你最好这样做：

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

这样一来，您就不需要在html中重复编写onmouseover和onmouseout的代码。
您代码中存在的错误是 - 图像ID没有#标识符，虽然在Chrome中似乎可以工作，但我不知道它能否在每个浏览器中按预期工作，同时函数名称的大小写也不同。
1

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

1

$(2img) 应该改为 $('#'+2img)，并且调用函数时使用 showImg("2img2")。

0

演示

$('.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);
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接