Как добавить эффект fadeIn, показывающий скрытый div

Question

С помощью других участников у меня есть следующий код, который позволяет показывать и скрывать divs по одному.

Если я нажму кнопку, он отобразит соответствующий div, и если я нажму на другую кнопку, предыдущий div исчезнет, ​​а следующий покажет.

Однако, когда я нажимаю на кнопку, чтобы показать div, у нее нет никакого эффекта перехода или времени. Он сразу появляется сразу

Если в функции я добавляю такой момент времени. $(id).show(800); У него будет эффект перехода или fadeIn, но если кто-то нажмет на кнопку, чтобы показать div, и нажмите на ту же кнопку еще раз, чтобы скрыть он, div уйдет и вернется назад.

Может кто-нибудь помочь мне добавить этот переход или fadeIn таким образом, что если кнопка нажата, чтобы скрыть 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); 
     }); 
    }); 
} 

Я предлагаю вам добавить еще один класс для кнопок, которые собираются быть отключены для того, чтобы не отключить все кнопки с классом btn в DOM.