Twitter Bootstrap提醒可以淡入淡出吗？
当我第一次看到Bootstrap中的警报时，我以为它们会像模态窗口那样行事，下降或淡入，然后在closures时淡出。 但它似乎总是可见的。 我想我可以让他们坐在我的应用程序上方的一层，并pipe理显示他们，但我想知道，如果function是内置的？
谢谢！
编辑，我到目前为止：
<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> 我强烈反对前面提到的大多数答案。
简短的回答：
省略“in”类并添加它使用jQuery淡入。
看到这个jsfiddle的一个例子，在3秒后消失警报http://jsfiddle.net/QAz2U/3/
很长的回答：
虽然这是真的bootstrap本身并不支持在警报中淡出，但大多数答案都使用jQuery淡入淡出function，它使用JavaScript来animation（淡入淡出）元素。 这个好处是跨浏览器的兼容性。 缺点是性能（另请参阅： jQuery调用CSS3淡入淡出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; }
为什么我觉得这个performance如此重要？ 使用旧浏览器和硬件的人可能会通过jQuery.fade（）获得波涛汹涌的过渡。 现代浏览器的旧硬件也是如此。 使用CSS3转换，使用现代浏览器的用户即使使用较旧的硬件也能获得stream畅的animation效果，而使用旧版浏览器的用户不会支持CSS转换，只会立即看到popup的元素，相比起伏不定的animation，这是一种更好的用户体验。
我来到这里寻找与上面相同的答案：淡入自举警报。 在Bootstrap的代码和CSS中进行了一些挖掘之后，答案非常简单。 不要将“in”类添加到警报中。 添加这个使用jQuery，当你想淡入你的警报。
HTML（注意，课堂上没有！）
<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淡入一个盒子。 使用“隐藏”类中构build的引导来有效地在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，你可以添加'隐藏'类到你自己的CSS文件，或者只是添加到你的div：
<div style="display:none;" id="saveAlert">
你的div将基本上被设置为默认隐藏，然后jQuery将执行fadeIn操作，迫使div显示。
对于2.3及以上版本，只需添加：
$(".alert").fadeOut(3000 );
引导：
<div class="alert success fade in" data-alert="alert" > <a class="close" data-dismiss="alert" href="#">×</a> // code </div>
适用于所有浏览器。
将hide类添加到alert-message 。 然后把下面的代码放在你的jQuery脚本导入之后：
$(document).ready( function(){ $(".alert-message").animate({ 'height':'toggle','opacity':'toggle'}); window.setTimeout( function(){ $(".alert-message").slideUp(); }, 2500); });
如果你想处理多条消息，这段代码将按照升序隐藏它们：
$(document).ready( function(){ var hide_delay = 2500; // starting timeout before first message is hidden var hide_next = 800; // time in mS to wait before hiding next message $(".alert-message").slideDown().each( function(index,el) { window.setTimeout( function(){ $(el).slideUp(); // hide the message }, hide_delay + hide_next*index); }); });
目前的答案没有为我工作。 我正在使用Bootstrap 3。
我喜欢Rob Vermeer所做的，从他的回应开始。
对于淡入淡出效果，我只是用了下面的函数和jQuery：
Html在我的页面上添加警报到：
<div class="alert-messages text-center"> </div>
Javascriptfunction来显示和解除警报。
function showAndDismissAlert(type, message) { var htmlAlert = '<div class="alert alert-' + type + '">' + message + '</div>'; // Prepend so that alert is on top, could also append if we want new alerts to show below instead of on top. $(".alert-messages").prepend(htmlAlert); // Since we are prepending, take the first alert and tell it to fade in and then fade out. // Note: if we were appending, then should use last() instead of first() $(".alert-messages .alert").first().hide().fadeIn(200).delay(2000).fadeOut(1000, function () { $(this).remove(); }); }
然后，显示和解除警报，只需调用如下函数：
showAndDismissAlert('success', 'Saved Successfully!'); showAndDismissAlert('danger', 'Error Encountered'); showAndDismissAlert('info', 'Message Received');
作为一个便笺，我把div.alert-messages固定在顶部：
<style> div.alert-messages { position: fixed; top: 50px; left: 25%; right: 25%; z-index: 7000; } </style>
我不同意Bootstrap使用fade in的方式（如在他们的文档中看到的 – http://v4-alpha.getbootstrap.com/components/alerts/ ），我的build议是避免类名fade ，并避免一般的模式（这是目前在这个问题的最高评价答案）。
（1）语义是错误的 – 转换是暂时的，但类名继续存在。 那么我们为什么要把我们的课程名称fade fade in呢？ 它应该被faded faded-in ，所以当开发人员读取标记时，很明显这些元素已经faded或faded-in 。 Bootstrap团队已经hide了hidden ，为什么fade呢？
（2）使用2个类fade单个转换污染类空间。 而且， fade和相互关联还不清楚。 in课堂上看起来像一个完全独立的课堂，如alert和alert-success 。
最好的解决方法是在元素faded时使用faded淡出，并在元素淡入时淡入淡出。
警报消失
所以要回答这个问题。 我认为警报标记，风格和逻辑应该按照以下方式编写。 注意：如果您使用的是香草javascript，请随意更换jQuery逻辑 。
HTML
<div id="saveAlert" class="alert alert-success"> <a class="close" href="#">×</a> <p><strong>Well done!</strong> You successfully read this alert message.</p> </div>
CSS
.faded { opacity: 0; transition: opacity 1s; }
JQuery的
$('#saveAlert .close').on('click', function () { $("#saveAlert") .addClass('faded'); });
当然，是的。 在你的项目中使用这个简单的文件： https ： //gist.github.com/3851727
首先添加你这样的HTML：
<div id="messagebox" class="alert hide"></div>
然后使用：
$("#messagebox").message({text: "Hello world!", type: "error"});
您可以将所有引导警报types（如error ， success和warning作为选项传递给属性。
3秒后，我用这种方法closures了我的警报。 希望它会有用。
setTimeout(function(){ $('.alert').fadeTo("slow", 0.1, function(){ $('.alert').alert('close') }); }, 3000)
