Flash消息 – jQuery
在我的Rails应用程序中，我有闪存消息，我希望它每次有闪存消息时，它从顶部向下滚动（所有内容变低）停留几秒钟，幻灯片重新启动。
我怎么能用jQuery做到这一点？
我切换高度？
更新
有时消息会被注入到HTML中，这意味着由于DOM已经加载， slideDown将无法工作，我怎么能拥有它，以便jQuery查找.message然后应用slideDown和slideUp ？
您可以将其向下滑动，等待几秒钟，然后再次向后滑动：
$(selector for your message).slideDown(function() { setTimeout(function() { $(selector for your message).slideUp(); }, 5000); });
将5000更改为您希望消息在几毫秒内保持可见的时间。
并记得设置display: none; 在CSS中为你的消息，所以它直到jQuery进入才出现。
我假设你的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 }); } });
使用JQuery的slideDown()并在回调中调用slideUp()并加上一个计时器：
$("#message").slideDown(500, function(){ setTimeout(function(){ $("#message").slideUp(500); },5000); });
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) } }
你可以这样做。 这里的持续时间以毫秒为单位。
$.fn.flash_msg=function(duration){ this.fadeIn().delay(duration).fadeOut(function(){ this.remove(); }) } $("#message").flash_msg(1500);