jQuery淡出MouseOver通过Div中的多个图像淡出

Question

所以我正在设计一个网站，我希望能够通过一个名为XHTML 1.0的图像获得每个公司的徽标。在鼠标悬停时淡入淡出并在不再混淆时淡出。我安装了jQuery，什么不安装，我只是不知道每个图像或单独一个图像的代码。我不懂JavaScript和/或jQuery。

非常感谢您将来的答案（以及可能的解释）， 亚伦布鲁尔

Answer 1

每个图像都需要一个容器，否则在图像淡出时没有元素可以触发鼠标。

HTML

<div class="img-container">
   <img src="a.jpg" alt="a" />
</div>

<div class="img-container">
   <img src="b.jpg" alt="b" />
</div>

<div class="img-container">
   <img src="c.jpg" alt="c" />
</div>

的jQuery

$('.img-container').each(function() {

   // Get a reference to the image.    
   var img = $(this).find('img');

   // Hide by default.
   img.hide();

   $(this).hover(function() {
       img.stop().fadeIn(500);
   }, function() {
       img.stop().fadeOut(500);
   });

});

Answer 2

也许这个小小的现场演示会让你朝着正确的方向前进，因为它使用CSS3和jquery进行淡入淡出，所以如果一个失败，另一个可以接管。 http://jsfiddle.net/robx/jrnFj/2/