jquery - 显示以前隐藏的 Bootstrap 警报

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>

如您所见，它是隐藏的(按类名)。现在我试图展示它:

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

没有任何反应......唯一似乎有效的解决方案是:

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

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

Answer 1

创建您自己的隐藏类。

bootstrap .hidden 类如下，这就是为什么 .fadeIn(); 不起作用的原因......

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

因此您可以创建自己的隐藏类。

.hide-me{
    display: none;
}

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

DEMO