jQuery 淡入淡出 鼠标悬停时通过 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/