jQuery mouseover淡入淡出效果

Question

我一直在从http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/学习如何将Jquery鼠标悬停在效果上

如何使用三个单独的按钮来实现此效果？ 复制副本时，我总是遇到Divs重叠的问题，无法将它们彼此分开。 抱歉，如果我的最初问题令人困惑！ 这是我的jsfiddle： http : //jsfiddle.net/japaneselanguagefriend/EgDqy/

<div class="fadehover"><img src="button 1" alt="" class="a" /><img src="button 1 roll" alt="" class="b" /></div>

<div class="fadehover"><img src="button 2" alt="" class="c" /><img src="button 2 roll" alt="" class="d" /></div>

Answer 1

这是一个小提琴，应该让您开始正确的道路：

http://jsfiddle.net/EgDqy/12/

<div class="cell">

<img src="http://www.charlesayoub.com/news/public/uploads/images/895377521.jpeg" alt="" display /> 

<img src="http://static.ddmcdn.com/gif/smart-car-1.jpg" class="fader" alt="" />

</div>


<div class="cell"> 

<img src="http://www.charlesayoub.com/news/public/uploads/images/895377521.jpeg" alt="" /> 

<img src="http://static.ddmcdn.com/gif/smart-car-1.jpg" class="fader" alt="" />

</div>

<div class="cell"> 

<img src="http://www.charlesayoub.com/news/public/uploads/images/895377521.jpeg" alt="" /> 

<img src="http://static.ddmcdn.com/gif/smart-car-1.jpg" class="fader" alt="" />

</div>​


$(".cell").hover(
   function() {
      $(this).find('.fader').fadeOut("slow");
   },
   function() {
      $(this).find('.fader').fadeIn("slow");
   }
);


.cell{ width:100px; display:inline-block; position:relative; }
.cell img { width:100px; position:absolute; top:0; left:0; }

Answer 2

基本上因为div的内部元素是绝对定位的，所以div没有任何测量值（对此有一个专门的术语，但可以避免）。 基本上，您需要显式设置div的宽度和高度。 您可以在CSS中执行此操作，也可以在javascript / jquery中动态生成CSS。 这是使用jquery的示例。

http://jsfiddle.net/EgDqy/13/

示例描绘了数千个单词，如果其他人看到这个问题，这可能会帮助他们理解问题。 点击右边的按钮

http://jsfiddle.net/EgDqy/16/