显示以前隐藏的引导警报

Question

这是一个简单的Bootstrap警报：

<div id="alert_recover_ok" class="alert alert-success hidden">
    <a class="close" data-dismiss="alert" href="#">&#x2716;</a>
    Please check your email for recovery instructions
</div>

如您所见，它是隐藏的（ by classname ）。现在我想表明它：

$('#alert_recover_ok').fadeIn();

什么都没发生......似乎唯一有效的解决方案是：

$('#alert_recover_ok').removeClass('hidden');

...但当然，这不会有很好的淡化效果。有什么想法吗？

Answer 1

创建自己的hidden课程。

bootstrap .hidden类如下，这就是.fadeIn();只能工作的原因......

.hidden {
    display: none!important;
    visibility: hidden!important;
}

因此，您可以创建自己的hidden课程。

.hide-me{
    display: none;
}

使用此代替hidden，然后.fadeIn();将起作用。

DEMO

Answer 2

这种情况正在发生，因为fadeIn（）不会删除你的类，它继续隐藏元素。

这是一个kludge，但它应该工作：

$('#alert_recover_ok').removeClass('hidden').hide().fadeIn();

Answer 3

从bootstrap css中删除 .hidden 类，并编写自己的自定义隐藏类，如下所示..

.hidden{display:none;}