如何使用 jQuery 使图像在悬停时淡入淡出？

Question

我试过一遍又一遍地查看我的代码，让 octo 图像在鼠标悬停时淡出，但没有成功。这是一个菜鸟问题，但想知道是否有比我大的人可以看一眼。

$('#octo').hover(function(){  
$(this).find('img').stop().fadeTo('slow', 0);},  
function(){  
$(this).find('img').stop().fadeTo('slow', 1);  
});

谢谢，本

Answer 1

删除 .find('img')，因为 $(this) 已经引用了图像元素。

Answer 2

在 fiddle 中，我看到图像本身是“#octo”而不是它的子项，因此您不需要 .find('img')，如下所示：

$('#octo').hover(function(){  
   $(this).stop().fadeTo('slow', 0);  
},  
function(){  
  $(this).stop().fadeTo('slow', 1);  
});

HTML供参考：

<ul id="contact">
    <li><img id="octo" src="http://s.icons8.com/wp-content/uploads/2014/01/octopus-128.png" width="28" height="28"></li>
</ul>

这是一个有效的 fiddle：

Answer 3

试试这个

    $('#octo').hover(function(){  
      $(this).stop().fadeTo('slow', 0); },  
   function(){  
      $(this).stop().fadeTo('slow', 1);  
   });

这会解决你的问题

How can I use jQuery to make an image fade on a hover?