jQuery 动画：fadeIn() 隐藏 div，不显示内容答案

【问题标题】：jQuery animations: fadeIn() hidden div, not showing contentjQuery 动画：fadeIn() 隐藏 div，不显示内容
【发布时间】：2013-04-15 00:50:48
【问题描述】：

我有一个 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 中进行测试。

感谢您的帮助！

【问题讨论】：

你确定 CSS 设置为 set display: none 和 not visibility: hidden？如果它设置为可见性：隐藏，这将不起作用
你能发布你的 CSS 吗？我做了一个简单的副本，它似乎按预期工作。 jsfiddle.net/daCrosby/wXdN5
hidden 是一个类吗？如果是这样，您可能必须触发删除该类。我遇到了类隐藏元素的方式（例如 Opacity:0、display:none）可以覆盖 jquery.show 或 jquery.fade 方法的冲突。
是的。 hidden 只是 css 中的一个小实用程序类，它只是显示：none 是内部唯一的规则

标签： jquery jquery-animate

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

试试这个

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

【讨论】：