显示以前隐藏的引导警报

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>

如您所见,它是隐藏的(通过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