如何添加显示隐藏 div 的淡入淡出效果答案

【问题标题】：How to add a fadeIn effect revealing a hidden div如何添加显示隐藏 div 的淡入淡出效果
【发布时间】：2015-07-03 22:56:55
【问题描述】：

在其他成员的帮助下，我有了以下代码，可以一次显示和隐藏一个 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();
}

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您应该禁用所有按钮，直到动画结束：

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

我建议您在将要被禁用的按钮中添加另一个类，以便不禁用 DOM 中类 btn 的所有按钮。

【讨论】：