4

在我的 Rails 应用程序中，我有 flash 消息，我希望每次有 flash 消息时，它都会从顶部向下滚动（所有内容都变低）停留几秒钟，然后幻灯片会向上滚动。

我怎么能用 jQuery 做到这一点？

我要切换高度吗？

更新

有时消息会被注入到 HTML 中，这意味着slideDown由于 DOM 已经加载，因此将无法工作，我怎样才能拥有它以便 jQuery 查找.message然后应用slideDownand slideUp？

4

5 回答 5

10

您可以让它向下滑动，等待几秒钟，然后再次滑动：

$(selector for your message).slideDown(function() {
    setTimeout(function() {
        $(selector for your message).slideUp();
    }, 5000);
});

将 更改为5000您希望消息保持可见的时间（以毫秒为单位）。

并且记得display: none;在 CSS 中为你的消息设置，这样它在 jQuery 进入之前不会出现。

于 2012-12-22T20:53:46.297 回答
1

我假设您的 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 });
    }
});
于 2012-12-22T20:58:10.683 回答
0

使用 JQueryslideDown()并slideUp()在回调中调用加上一个计时器：

$("#message").slideDown(500, function(){
    setTimeout(function(){
$("#message").slideUp(500);  
},5000);
});
于 2012-12-22T20:56:29.803 回答
0 
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)
    } 

 }
于 2017-10-19T15:39:49.243 回答
0

你可以这样做。这里的持续时间以毫秒为单位。

$.fn.flash_msg=function(duration){
  this.fadeIn().delay(duration).fadeOut(function(){
    this.remove();
  })
}

$("#message").flash_msg(1500);
于 2018-08-06T07:47:13.600 回答