jQuery顯示塊和淡入淡出

Question

我試圖創建一個非常基本的選項卡系統，其中選項卡應顯示爲淡入效果。

在以下代碼中，將.field設置爲display:none並附上css。代碼將正確顯示選項卡，但它不會顯示fadeIn效果。

HTML：

<div class="block"> 
    <div class="controls"> 
     <a class="one" href="#">First</a> 
     <a class="two" href="#">Second</a> 
    </div> 
    <div class="field field-one active">Field 1</div> 
    <div class="field field-two">Field 2</div> 
</div> 

的jQuery：

$('.controls .one').click(function(){ 
     $('.field').removeClass('active'); 
     $('.field-one').addClass('active').fadeIn(); 
}); 

$('.controls .two').click(function(){ 
     $('.field').removeClass('active'); 
     $('.field-two').addClass('active').fadeIn(); 
}); 

CSS：

.field{ 
    display: none; 
} 

.field.active{ 
    display: block; 
} 

演示：

http://jsfiddle.net/ReyBd/

Answer 1

不能使用hide只有fadeIn？是真正需要的活動類嗎？

入住這jsfiddle

Answer 2

當您添加類活躍，它會顯示爲塊立即使用，因爲你的CSS規則，因此，它不能褪色。

你並不需要添加/因爲jQuery中的fadeIn（）方法自動爲你處理這個問題，通過爲opacity和display：block應用內聯樣式，所以它覆蓋了你的css。

此外，您可以使用fadeToggle方法，它檢查元素的狀態並切換它。

所以，只要做到這一點，而不是（請務必留下第一CSS規則.field {display:none;}）：

$('.controls .one').click(function(){ 
    $('.field').fadeToggle(); 
}); 

Answer 3

我調整了一些項目使用絕對定位，以使標籤的物品褪色過對方（而不是堆積狀默認行爲是）。

此外，活動類是不必要的你正在嘗試做的，但如果你需要主動類爲別的，你將在以後添加的東西，我把它忘在

的Javascript：

$('.field').removeClass('active').hide(); 
$('.field-one').addClass('active').show(); 

$('.controls .one').click(function(){ 
     $('.field').removeClass('active').fadeOut(); 
     $('.field-one').addClass('active').fadeIn(); 
}); 

$('.controls .two').click(function(){ 
     $('.field').removeClass('active').fadeOut(); 
     $('.field-two').addClass('active').fadeIn(); 
}); 

HTML：

<div class="block"> 
     <div class="controls"> 
      <a class="one" href="#">First</a> 
      <a class="two" href="#">Second</a> 
     </div> 
     <div class="container"> 
     <div class="field field-one active">Field 1</div> 
     <div class="field field-two">Field 2</div> 
     </div> 
    </div> 

ç SS：

.field{ width: 100px; 
    height: 100px; 
    background: green; 
    position: absolute; 
    top: 0; 
    left: 0; } 

.container { position: relative; } 

.field.active{ } 

.field-two{ background: yellow; }