jQuery Fade In Fade Out On MouseOver 通过 Div 中的多个图像答案

【问题标题】：jQuery Fade In Fade Out On MouseOver Via Multiple Images In A DivjQuery Fade In Fade Out On MouseOver 通过 Div 中的多个图像
【发布时间】：2011-08-26 02:59:21
【问题描述】：

所以我正在设计一个网站，我希望能够通过一个名为 XHTML 1.0 Transitional 的图像让每个公司的徽标在鼠标悬停时淡入，在不再悬停时淡出。我已经安装了 jQuery，什么没有，我只是不知道每个图像或一个图像的代码。我不知道 JavaScript 和或 jQuery。

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

【问题讨论】：

“我希望能够通过通过 XHTML 1.0 过渡淡入调用的图像让每个公司的徽标”？
我希望能够让每个公司的徽标（通过图像），其中通过 HTML（XHTML 1.0 Transitional To Be Exact）调用到文档中，淡入/淡出（通过 jQuery，通过 JavaScript）在 MouseOver 上。

标签： javascript jquery css xhtml fade

【解决方案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);
   });

});

【讨论】：

@alex 那么，.img-container 代表什么？我将它放入 HTML 文档的标记中，对吗？如果它不是 CSS 文档的一部分，它如何调用 CSS Div？我想我开始明白这里发生了什么。请稍微解释一下？非常感谢。
@Aaron Nope，此代码将处理任意数量的图像。我将包含一些示例 HTML。
@alex 我将此编码放入 HTML 文档中的标题标签之间，并调用了所需的 CSS 和其他什么，但仍然一无所获。
@alex 啊，我明白了，非常感谢你，但我怎么会遇到它可见，但直到鼠标悬停才可见？另外，它应该在几次后停止工作吗？
@Aaron 在 CSS 中使用 opacity 属性，在 jQuery 中使用 fadeTo()。

【解决方案2】：

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

【讨论】：