jQuery动画:fadeIn()隐藏div,不显示内容

Question

我有一个id为"start_game"的按钮,它有一个附加的点击功能和一个淡出按钮的回调,然后淡入当前由css设置的div显示:none.

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

这是当前的代码:

$("#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'); 不是很直观,但嘿,它的工作:)