Javascript Flash 消息 - jQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14006477/
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
Flash Message - jQuery
提问by user1919937
In my Rails application I have flash messages and I would like it so that each time there is a flash message, it scrolls down from the top (all the content goes lower) stays for a few seconds and the slides back up.
在我的 Rails 应用程序中，我有 flash 消息，我希望每次有 flash 消息时，它都会从顶部向下滚动（所有内容都变低）停留几秒钟，然后幻灯片又回来了。
How can I do this with jQuery?
我怎样才能用 jQuery 做到这一点？
Do I toggle the height?
我要切换高度吗？
Update
更新
Sometimes the message will be injected into the HTML which means that the slideDownwon't work since the DOM has already loaded, how can I have it so jQuery looks for .messageand then applies the slideDownand slideUp?
有时消息会被注入到 HTML 中，这意味着slideDown由于 DOM 已经加载而无法工作，我如何才能让它让 jQuery 查找.message然后应用slideDown和slideUp？
回答by Eleeist
You can make it slide down, wait for couple of seconds and slide back again with this:
你可以让它滑下来，等待几秒钟，然后再次滑回来：
$(selector for your message).slideDown(function() {
setTimeout(function() {
$(selector for your message).slideUp();
}, 5000);
});
Change the 5000to the time you want the message to stay visible in milliseconds.
将 更改为5000您希望消息以毫秒为单位保持可见的时间。
And remember to set display: none;in CSS for your message, so that it does not appear until jQuery goes in.
并记住display: none;在 CSS 中为您的消息设置，以便它在 jQuery 进入之前不会出现。
回答by tvanfosson
I'll assume your flash message is contained in some element that is (or can be) identified by class. You want to find the first one, then adjust the scroll position to the top of that element (or some offset from it), then wait and scroll back to the top.
我假设您的 flash 消息包含在某个由类标识（或可以）的元素中。您想找到第一个，然后将滚动位置调整到该元素的顶部（或与其偏移一些），然后等待并滚动回顶部。
$(function() {
var $flashMsg = $('.flash-message:first');
if ($flashMsg.length) { // we've got one
var top = $flashMsg.offset().top;
$('html,body').animate({ scrollTop: top })
.delay(3000)
.animate({ scrollTop: 0 });
}
});
回答by Lewiss
function flashRed(sel, blinks){ //using jQuery
blinks = blinks||3
var x = $(sel),
bg = x.css('background-color'),
fg = x.css('color'),
counter = 0,
f, b;
for(var i = 0; i < blinks * 2; i++){
setTimeout(function(){
if(counter%2){
f=fg; b=bg
}
else{
f='white'; b='red'
}
counter++
x.css({'color':f, 'background-color':b})
},i*400)
}
}
回答by Kaleem Nalband
You can do it like this. here duration is in milliseconds.
你可以这样做。这里的持续时间以毫秒为单位。
$.fn.flash_msg=function(duration){
this.fadeIn().delay(duration).fadeOut(function(){
this.remove();
})
}
$("#message").flash_msg(1500);
回答by Matanya
use JQuery's slideDown()and call slideUp()in the callback coupled with a timer:
使用 JQueryslideDown()并slideUp()在回调中调用与计时器相结合的方法：
$("#message").slideDown(500, function(){
setTimeout(function(){
$("#message").slideUp(500);
},5000);
});
