Question

我刚回到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>

Answer 1

我认为你会发现这样做更好：

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

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

你的代码中的错误是 - 没有＃表示要淡化的图像的ID，虽然它似乎在chrome中工作我不知道它是否会在每个浏览器中按预期工作，但函数名称也没有有相同的情况。

Answer 2

$(2img)应为$('#2img')，就是

Answer 3

$（2img）应为$（'＃'+ 2img）并调用showImg（“2img2”）等函数

Answer 4

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

jQuery悬停fadeIn fadeOut问题

4 个答案:

DEMO