Question

我有一个id为“start_game”的按钮，它有一个附加的点击功能和一个淡出按钮的回调，然后淡入当前由css设置的div显示：none。

当我单击按钮时，我看到包含所有这些内容的外部容器div扩展，就好像为要显示的div腾出空间，但是我从来没有看到里面的内容。< / p>

以下是当前代码：

$("#start_game").click(function () {
        $(this).fadeOut();
        $(".input-append").fadeIn();
    });

和html

<div class="hero-unit">
        <div id="container">
            <p>Shall we?</p>
            <button class="btn-primary btn-large" id="start_game">Play!</button>
            <div class="input-append hidden">
                <p>How many players?</p>
                <input class="span2" id="appendedInputButton" type="text" />
                <button class="btn" type="button">Go!</button>
            </div>
        </div>
    </div>

这里是唯一的自定义css，另一个css文件是twitter bootstrap

.hidden {
display: none;
}

现在我尝试了很多方法。我尝试过fadeIn，我尝试将show（）或hide（）或toggle（）或fadeToggle（）的几个不同组合链接在一起。我还尝试将隐藏div的所有子元素的迭代附加到回调并逐个执行fadeIn（），似乎没有任何工作。

我正在使用Google Chrome 26和IE10进行测试。

感谢您的帮助！

Answer 1

我刚遇到同样的情况。如果我标记最初隐藏的twitter引导程序控制组，然后使用show()方法控制组的外部div确实显示，但该控制组div的内容仍然是隐藏的。

原因是bootstrap CSS查找.hidden类以向内部div添加可见性CSS规则，但JQuery show（）方法不会删除隐藏的类。它直接操纵CSS，使隐藏的类保持原位。

您可以使用removeClass('hidden')来解决该问题。

现在红利问题：我们如何动画转换？

答案是：fadeIn().removeClass('hidden');不是非常直观，但嘿，它有效:)

Answer 2

试试这个

$("#start_game").click(function () {
    $(this).fadeOut();
    $(".input-append").fadeIn("slow").removeClass('hidden');
});

jQuery动画：fadeIn（）隐藏div，不显示内容

2 个答案: