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

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

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

这是当前的代码：

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

和HTML

   Shall we?
   How many players?

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

 .hidden { display: none; }

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

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

谢谢你的帮助！

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

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

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

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

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

试试这个

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