3

我有一个 id 为“start_game”的按钮，它有一个附加的点击函数和一个回调来淡出按钮，然后淡入当前由 css 设置为 display:none 的 div。

当我单击按钮时，我看到包含所有这些内容的外部容器 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 中进行测试。

谢谢你的帮助！

4

2 回答 2

10

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

原因是引导 CSS 会寻找.hidden类以将可见性 CSS 规则添加到内部 div，但 JQuery show() 方法不会删除隐藏类。它直接操作 CSS，将隐藏类留在原处。

你可以用它removeClass('hidden')来解决这个问题。

现在有一个额外的问题：我们如何为过渡设置动画？

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

于 2013-07-29T23:57:46.703 回答
0

尝试这个

$("#start_game").click(function () {
    $(this).fadeOut();
    $(".input-append").fadeIn("slow").removeClass('hidden');
});
于 2017-11-21T13:18:48.370 回答