如何添加淡入效果以显示隐藏的div

Question

在其他成员的帮助下，我获得了以下代码，该代码允许一次显示和隐藏div。

如果单击一个按钮，它将显示相应的div；如果单击另一个按钮，则上一个div将消失，而下一个div将显示。

但是，当我单击一个按钮以显示div时，它没有任何过渡或计时效果。 立即显示

如果在函数中，我添加这样的计时。 $(id).show(800); 它将具有transition或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中所有具有btn类的按钮。