如何添加顯示隱藏div的淡入效果

Question

在其他成員的幫助下，我有以下代碼可以一次顯示和隱藏一個div。

如果我點擊一個按鈕，它會顯示相應的div，如果我點擊另一個按鈕，前面的div會消失，下一個會顯示。

但是，當我點擊一個按鈕來顯示div時，它沒有任何轉換或時間效果。它立即顯示

如果在函數中我添加一個這樣的時間.. $(id).show(800);它將有轉換或淡入效果，但如果有人點擊一個按鈕來顯示div並再次點擊同一個按鈕來隱藏它，div將消失並且馬上返回。

有人可以幫助我添加該過渡或淡入的方式，如果按鈕被點擊隱藏div它將保持隱藏？

這是我有：

<p class="btn" onclick="toggleDivs('#div1');">Show div1</p> 
<p class="btn" onclick="toggleDivs('#div2');">Show div2</p> 
<p class="btn" onclick="toggleDivs('#div3');">Show div3</p> 
<p class="btn" onclick="toggleDivs('#div4');">Show div4</p> 
<div class="fadeOut" id="div1" style="display:none"; > 

    <div class="fadeOut" id="div1" style="display:none"; > 
<div class="container"> 
    <p>This is the content of div1</p> 
</div> 

<div class="fadeOut" id="div2" style="display:none"; > 
<div class="container"> 
    <p>This is the content of div2</p> 
</div> 

<div class="fadeOut" id="div3" style="display:none"; > 
<div class="container"> 
    <p>This is the content of div3</p> 
</div> 

<div class="fadeOut" id="div4" style="display:none"; > 
<div class="container"> 
    <p>This is the content of div4</p> 
</div> 

var toggleDivs = function (id) { 
$(".fadeOut").hide(800); 
$(id).show(); 
} 

Answer 1

應禁用所有按鈕，直到動畫的結尾：

var toggleDivs = function (id) { 
    $('.btn').attr('disabled', true) 
    $(".fadeOut").hide(800, function() { 
     $(id).show(800, function() { 
      $('.btn').attr('disabled', false); 
     }); 
    }); 
} 

我建議你添加另一個類的按鈕，會以不禁用與類中的所有按鈕被禁用DOM中的btn。