问Twitter Bootstrap提醒可以淡入淡出吗？

EN

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

简短回答：

省略了" in“类，并使用jQuery添加它以使其淡入。

请参阅此jsfiddle以获取在3秒http://jsfiddle.net/QAz2U/3/后在警报中消失的示例

长篇答案：

尽管bootstrap本身并不支持淡入警报，但这里的大多数答案都使用了jQuery淡入功能，该功能使用bootstrap对元素进行动画处理(淡入淡出)。这样做的最大优点是跨浏览器的兼容性。缺点是性能(另请参阅：jQuery to call CSS3 fade animation?)。

Bootstrap使用CSS3转换，其性能要好得多。这一点对移动设备很重要：

引导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的代码和CSS之后，答案相当简单。不要将"in“类添加到您的警报中。当你想要淡入你的警告时，使用jQuery添加这个。

超文本标记语言(注意，在类中没有！)

<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/

我使用的东西是：

在您的模板中有一个警告区域

<div id="alert-area"></div>

然后是用于显示警报的jQuery函数

function newAlert (type, message) {
    $("#alert-area").append($("<div class='alert-message " + type + " fade in' data-alert><p> " + message + " </p></div>"));
    $(".alert-message").delay(2000).fadeOut("slow", function () { $(this).remove(); });
}
newAlert('success', 'Oh yeah!');

您可以使用jquery淡入框中。使用'hide‘类中内置的bootstraps在div元素上有效地设置display:none：

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

然后在jquery中使用fadeIn函数，如下所示：

$("#saveAlert").fadeIn();

还可以指定fadeIn函数的持续时间，例如：$("#saveAlert").fadeIn(400)；

有关使用fadeIn函数的完整详细信息，请访问jQuery官方文档网站：http://api.jquery.com/fadeIn/

另外，如果你不使用jquery，你可以将'hide‘类添加到你自己的CSS文件中，或者直接添加到你的div中：

 <div style="display:none;" id="saveAlert">

然后，您的div基本上将被设置为隐藏作为默认设置，然后jQuery将执行fadeIn操作，强制显示div。