jquery - Twitter Bootstrap 警报可以淡入淡出吗？

Question

当我第一次看到 Bootstrap 中的警报时，我认为它们会像模式窗口一样运行，下降或淡入，然后在关闭时淡出。但似乎它们总是可见的。我想我可以让它们位于我的应用程序之上的一层并设法显示它们，但我想知道该功能是否内置？

谢谢!

编辑，我目前所拥有的:

<div id="saveAlert" class="alert-message success fade in" data-alert="alert" style="top:0">
  <a class="close" href="#">×</a>
  <p><strong>Well done!</strong> You successfully read this alert message.</p>
</div>

Answer 1

我强烈反对前面提到的大多数答案。

简答:

Omit the "in" class and add it using jQuery to fade it in.

有关 3 秒后警报消失的示例，请参阅此 jsfiddle http://jsfiddle.net/QAz2U/3/

长答案:

虽然 bootstrap 本身并不支持警报淡入淡出，但这里的大多数答案都使用 jQuery 淡入淡出函数，它使用 JavaScript 为元素设置动画(淡入淡出)。这样做的一大优势是跨浏览器兼容性。缺点是性能(另请参阅:jQuery to call CSS3 fade animation?)。

Bootstrap 使用 CSS3 转换，性能更好。这对移动设备很重要:

Bootstrap CSS 淡化警报:

.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -moz-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.fade.in {
  opacity: 1;
}

为什么我认为这个性能如此重要？使用旧浏览器和硬件的人可能会使用 jQuery.fade() 进行不稳定的转换。对于具有现代浏览器的旧硬件也是如此。使用 CSS3 过渡，使用现代浏览器的人即使使用较旧的硬件也能获得流畅的动画，而使用不支持 CSS 过渡的较旧浏览器的人只会立即看到元素弹出，我认为这比断断续续的动画更好的用户体验。

我来这里寻找与上述相同的答案:淡入 Bootstrap 警报。在深入研究了 Bootstrap 的代码和 CSS 之后，答案就很简单了。不要将“in”类添加到您的警报中。并在您想要淡入警报时使用 jQuery 添加它。

HTML(注意没有 in 类!)

<div id="myAlert" class="alert success fade" data-alert="alert">
  <!-- rest of alert code goes here -->
</div>

Javascript:

function showAlert(){
  $("#myAlert").addClass("in")
}

调用上面的函数添加“in”类并使用 CSS3 转换淡入警报:-)

另请参阅此 jsfiddle 以获取使用超时的示例(感谢 John Lehmann!):http://jsfiddle.net/QAz2U/3/