jQuery Twitter Bootstrap 警报可以淡入淡出吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7676356/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can Twitter Bootstrap alerts fade in as well as out?
提问by kreek
When I first saw the alerts in Bootstrap I thought they would behave like the modal window does, dropping down or fading in, and then fading out when closed. But it seems like they are always visible. I guess I could have them sit in a layer above my app and manage showing them but I was wondering if the functionality was built in?
当我第一次在 Bootstrap 中看到警报时，我认为它们的行为就像模式窗口一样，下拉或淡入，然后在关闭时淡出。但似乎它们总是可见的。我想我可以让它们位于我的应用程序上方的一层并管理显示它们，但我想知道是否内置了该功能？
thanks!
谢谢！
Edit, what I have so far:
编辑，到目前为止我所拥有的：
<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>
回答by DivZero
I strongly disagree with most answers previously mentioned.
我强烈不同意前面提到的大多数答案。
Short answer:
简短的回答：
Omit the "in" class and add it using jQuery to fade it in.
省略“in”类并使用 jQuery 添加它以使其淡入。
See this jsfiddle for an example that fades in alert after 3 seconds http://jsfiddle.net/QAz2U/3/
请参阅此 jsfiddle 以获取在 3 秒后淡入警报的示例http://jsfiddle.net/QAz2U/3/
Long answer:
长答案：
Although it is true bootstrap doesn't natively support fading in alerts, most answers here use the jQuery fade function, which uses JavaScript to animate (fade) the element. The big advantage of this is cross browser compatibility. The downside is performance (see also: jQuery to call CSS3 fade animation?).
尽管 bootstrap 本身并不支持在警报中淡入淡出，但这里的大多数答案都使用 jQuery 淡入淡出函数，该函数使用 JavaScript 为元素设置动画（淡化）。这样做的最大优点是跨浏览器兼容性。缺点是性能（另请参阅：jQuery 调用 CSS3 淡入淡出动画？）。
Bootstrap uses CSS3 transitions, which have way better performance. Which is important for mobile devices:
Bootstrap 使用 CSS3 过渡，它具有更好的性能。这对移动设备很重要：
Bootstraps CSS to fade the alert:
引导 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;
}
Why do I think this performance is so important? People using old browsers and hardware will potentially get a choppy transitions with jQuery.fade(). The same goes for old hardware with modern browsers. Using CSS3 transitions people using modern browsers will get a smooth animation even with older hardware, and people using older browsers that don't support CSS transitions will just instantly see the element pop in, which I think is a better user experience than choppy animations.
为什么我认为这种表现如此重要？使用旧浏览器和硬件的人可能会使用 jQuery.fade() 获得断断续续的过渡。使用现代浏览器的旧硬件也是如此。使用 CSS3 过渡使用现代浏览器的人即使使用较旧的硬件也可以获得流畅的动画，而使用不支持 CSS 过渡的旧浏览器的人会立即看到元素弹出，我认为这比断断续续的动画更好的用户体验。
I came here looking for the same answer as the above: to fade in a bootstrap alert. After some digging in the code and CSS of Bootstrap the answer is rather straightforward. Don't add the "in" class to your alert. And add this using jQuery when you want to fade in your alert.
我来到这里寻找与上述相同的答案：淡入引导警报。在深入研究 Bootstrap 的代码和 CSS 之后，答案相当简单。不要将“in”类添加到您的警报中。当您想要淡入警报时，使用 jQuery 添加它。
HTML (notice there is NO inclass!)
HTML（公告不存在的类！）
<div id="myAlert" class="alert success fade" data-alert="alert">
<!-- rest of alert code goes here -->
</div>
Javascript:
Javascript：
function showAlert(){
$("#myAlert").addClass("in")
}
Calling the function above function adds the "in" class and fades in the alert using CSS3 transitions :-)
调用上面的函数会添加“in”类并使用 CSS3 转换淡入警报:-)
Also see this jsfiddle for an example using a timeout (thanks John Lehmann!): http://jsfiddle.net/QAz2U/3/
另请参阅此 jsfiddle 以获取使用超时的示例（感谢 John Lehmann！）：http: //jsfiddle.net/QAz2U/3/
回答by Rob Vermeer
The thing I use is this:
我用的东西是这样的：
In your template an alert area
在您的模板中，有一个警报区域
<div id="alert-area"></div>
Then an jQuery function for showing an alert
然后是一个用于显示警报的 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!');
回答by kreek
You can fade-in a box using jquery. Use bootstraps built in 'hide' class to effectively set display:none on the div element:
您可以使用 jquery 淡入一个框。使用内置在 'hide' 类中的引导程序在 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>
and then use the fadeIn function in jquery, like so:
然后在jquery中使用fadeIn函数，像这样：
$("#saveAlert").fadeIn();
There are also specify a duration for the fadeIn function, e.g: $("#saveAlert").fadeIn(400);
也有指定淡入函数的持续时间，例如： $("#saveAlert").fadeIn(400);
Full details on using the fadeIn function can be found on the official jQuery documentation site: http://api.jquery.com/fadeIn/
关于使用fadeIn 函数的完整细节可以在官方jQuery 文档站点上找到：http://api.jquery.com/fadeIn/
Just a sidenote as well, if you arent using jquery, you can either add the 'hide' class to your own CSS file, or just add this to your div:
也只是一个旁注，如果您不使用 jquery，您可以将“隐藏”类添加到您自己的 CSS 文件中，或者将其添加到您的 div 中：
<div style="display:none;" id="saveAlert">
Your div will then basically be set to hidden as default, and then jQuery will perform the fadeIn action, forcing the div to be displayed.
您的 div 将基本上设置为默认隐藏，然后 jQuery 将执行淡入操作，强制显示 div。
回答by pri
For 2.3 and above, just add:
对于 2.3 及以上版本，只需添加：
$(".alert").fadeOut(3000 );
$(".alert").fadeOut(3000 );
bootstrap:
引导程序：
<div class="alert success fade in" data-alert="alert" >
<a class="close" data-dismiss="alert" href="#">×</a>
// code
</div>
Works in all browsers.
适用于所有浏览器。
回答by cmcginty
Add hideclass to alert-message. Then put the following code after your jQuery script import:
将hide类添加到alert-message. 然后在您的 jQuery 脚本导入后放置以下代码：
$(document).ready( function(){
$(".alert-message").animate({ 'height':'toggle','opacity':'toggle'});
window.setTimeout( function(){
$(".alert-message").slideUp();
}, 2500);
});
If you want handle multiple messages, this code will hide them in ascending order:
如果要处理多条消息，此代码将按升序隐藏它们：
$(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);
});
});
回答by Chris
None of the current answers worked for me. I'm using Bootstrap 3.
目前的答案都不适合我。我正在使用 Bootstrap 3。
I liked what Rob Vermeer was doing and started from his response.
我喜欢罗布·维米尔 (Rob Vermeer) 的所作所为，并从他的回应开始。
For a fade in and then fade out effect, I just used wrote the following function and used jQuery:
对于淡入淡出效果，我只是使用编写了以下函数并使用了jQuery：
Html on my page to add the alert(s) to:
我的页面上的 Html 将警报添加到：
<div class="alert-messages text-center">
</div>
Javascript function to show and dismiss the alert.
用于显示和关闭警报的 Javascript 函数。
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(); });
}
Then, to show and dismiss the alert, just call the function like this:
然后，要显示和关闭警报，只需像这样调用函数：
showAndDismissAlert('success', 'Saved Successfully!');
showAndDismissAlert('danger', 'Error Encountered');
showAndDismissAlert('info', 'Message Received');
As a side note, I styled the div.alert-messages fixed on top:
作为旁注，我设置了固定在顶部的 div.alert-messages 样式：
<style>
div.alert-messages {
position: fixed;
top: 50px;
left: 25%;
right: 25%;
z-index: 7000;
}
</style>
回答by tfmontague
I don't agree with the way that Bootstrap uses fade in(as seen in their documentation - http://v4-alpha.getbootstrap.com/components/alerts/), and my suggestion is to avoid the class names fadeand in, and to avoid that pattern in general (which is currently seen in the top-rated answer to this question).
我不同意 Bootstrap 使用的方式fade in（如他们的文档中所见 - http://v4-alpha.getbootstrap.com/components/alerts/），我的建议是避免使用类名fade和in，并避免这种模式一般（目前在这个问题的最高评价答案中可以看到）。
(1) The semantics are wrong - transitions are temporary, but the class names live on. So why should we name our classes fadeand fade in? It should be fadedand faded-in, so that when developers read the markup, it's clear that those elements were fadedor faded-in. The Bootstrap team has already done away with hidefor hidden, why is fadeany different?
(1) 语义是错误的 - 转换是暂时的，但类名仍然存在。那么我们为什么要命名我们的类fade和fade in？它应该是fadedand faded-in，这样当开发人员阅读标记时，很明显这些元素是fadedor faded-in。Bootstrap 团队已经废除了hidefor hidden，为什么会有fade什么不同呢？
(2) Using 2 classes fadeand infor a single transition pollutes the class space. And, it's not clear that fadeand inare associated with one another. The inclass looks like a completely independent class, like alertand alert-success.
(2) 使用 2 个类fade和in单个转换会污染类空间。并且，目前尚不清楚fade和in是否相互关联。本in类看起来像一个完全独立的类，如alert和alert-success。
The best solution is to use fadedwhen the element has been faded out, and to replace that class with faded-inwhen the element has been faded in.
最好的解决方案是faded在元素淡出时使用，并在元素淡入时替换该类faded-in。
Alert Faded
警报消退
So to answer the question. I think the alert markup, style, and logic should be written in the following manner. Note: Feel free to replace the jQuery logic, if you're using vanilla javascript.
所以来回答这个问题。我认为警报标记、样式和逻辑应按以下方式编写。注意：如果您使用的是 vanilla javascript，请随意替换 jQuery 逻辑。
HTML
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
CSS
.faded {
opacity: 0;
transition: opacity 1s;
}
JQuery
查询
$('#saveAlert .close').on('click', function () {
$("#saveAlert")
.addClass('faded');
});
回答by wicardoso
I got this way to close fading my Alert after 3 seconds. Hope it will be useful.
我通过这种方式在 3 秒后关闭淡入淡出的警报。希望它会很有用。
setTimeout(function(){
$('.alert').fadeTo("slow", 0.1, function(){
$('.alert').alert('close')
});
}, 3000)
回答by Afshin Mehrabani
Of course, Yes. Use this simple file in your project: https://gist.github.com/3851727
当然，是的。在您的项目中使用这个简单的文件：https: //gist.github.com/3851727
First add you HTML like this:
首先像这样添加你的 HTML：
<div id="messagebox" class="alert hide"></div>
and then use:
然后使用：
$("#messagebox").message({text: "Hello world!", type: "error"});
You can pass all bootstrap alert types such as error, successand warningto typeproperty as options.
您可以将所有引导程序警报类型（例如error,success和 ）作为选项传递warning给type属性。
回答by Vikasdeep Singh
This is very important questionand I was struggling to get it done (show/hide) message by replacing current and add new message.
这是一个非常重要的问题，我正在努力通过替换当前消息和添加新消息来完成（显示/隐藏）消息。
Below is working example:
以下是工作示例：
function showAndDismissAlert(type, message) {
var htmlAlert = '<div class="alert alert-' + type + '">' + message + '</div>';
$(".alert-messages").prepend(htmlAlert);
$(".alert-messages .alert").hide().fadeIn(600).delay(2000).fadeOut(1000, function() {
$(this).remove();
});
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alert-messages"></div>
<div class="buttons">
<button type="button" name="button" onclick="showAndDismissAlert('success', 'Saved Successfully!')">Button1</button>
<button type="button" name="button" onclick="showAndDismissAlert('danger', 'Error Encountered')">Button2</button>
<button type="button" name="button" onclick="showAndDismissAlert('info', 'Message Received')">Button3</button>
</div>Hope it will help others!
希望它能帮助别人！
