如何淡出一個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()的對象。