如何淡出一个div并淡入另一个div？

Question

我的目标是：

• 在鼠标悬停时，淡出“富”和“酒吧”
• 在鼠标淡出，淡出“酒吧”和“富”

褪色

我可以在鼠标上淡出'foo'，但当我将鼠标移动到'bar'div之外时，我无法淡入'bar'，然后返回到正常状态。

我有以下代码：

HTML

<ul> 
    <li> 
    <div class="foo"></div> 
    <div class="bar"></div> 
    </li> 
    <li> 
    <div class="foo"></div> 
    <div class="bar"></div> 
    </li> 
</ul> 

CSS

li .bar { display: none; } 

JS

// On mouse over, fade out 'foo' and fade in 'bar' 
jQuery('.foo').mouseover(function() { 
    jQuery(this).fadeOut(function() { 
    jQuery('.bar').fadeIn(); <-- This is wrong. I need to get the bar inside this li 
}); 

// On mouse out, fade out 'bar' and fade in 'foo' 
jQuery('.bar').blur(function() { 
    jQuery(this).fadeOut(function() { 
    jQuery('.foo').fadeIn(); 
}); 

这里是我的不好的jsfiddle尝试：http://jsfiddle.net/TvCT5/2/

欣赏正确的方向:)

Answer 1

这是你要找的效果吗？

jsFiddle example

的jQuery：

jQuery('.foo').mouseover(function(){ 
    jQuery(this).fadeOut(function(){jQuery(this).siblings().fadeIn();}); 
}); 
jQuery('.bar').mouseout(function(){ 
    jQuery(this).fadeOut(function(){jQuery(this).siblings().fadeIn();}); 
}); 

Answer 2

一般设计模式如下。取而代之的是：

jQuery('.bar').fadeIn(); 

使用本找到一个共同<li>父与对象触发事件的.bar对象：

jQuery(this).closest("li").find('.bar').fadeIn(); 

，或者因为你的两个项目是兄弟姐妹，你可以更简单使用此：

jQuery(this).siblings('.bar').fadeIn(); 

这个发现是一个<li>标签的最近的祖先，然后找到.bar该祖先中的对象将与事件触发器相匹配。

完整的代码应该是这样的：

// On mouse over, fade out 'foo' and fade in 'bar' 
jQuery('.foo').mouseover(function() { 
    jQuery(this).fadeOut(function() { 
    jQuery(this).siblings('.bar').fadeIn(); 
}); 

// On mouse out, fade out 'bar' and fade in 'foo' 
jQuery('.bar').blur(function() { 
    jQuery(this).fadeOut(function() { 
    jQuery(this).siblings('.foo').fadeIn(); 
}); 

这是一个有点不寻常配对.mouseover()用，因为这些不配对，但使用.mouseover()和.mouseout()也可能有问题，因为.blur()你隐藏触发.mouseover()的对象。