Question

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

如果我点击一个按钮，它将显示相应的div，如果我点击另一个按钮，前一个div将消失，下一个将显示。

但是，当我点击按钮显示div时，它没有任何转换或计时效果。它会立即显示

如果在函数中我添加了这样的时间.. $(id).show(800);它将具有转换或淡入效果，但如果有人单击按钮显示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);
        });
    });
}

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

如何添加fadeIn效果，显示隐藏的div

1 个答案: