闪现信息 - jQuery

Question

在我的Rails应用中，我有flash消息，并且希望每次出现flash消息时，它从顶部滚动下来（所有内容向下移动），停留几秒钟，然后再滑回去。

如何使用jQuery实现这一功能？

我该切换高度吗？

更新

有时消息将被注入到HTML中，这意味着slideDown不起作用，因为DOM已经加载，如何让jQuery查找.message，然后应用slideDown和slideUp？

- user1919937

---

什么是“闪存消息”？ - Lee Taylor

请查看jQuery API中的slideUp，slideDown或slideToggle函数：http://api.jquery.com/slideToggle/ - charlietfl

请澄清你的问题以及你到目前为止尝试过的内容，如果有任何不起作用的代码示例，请发布。 - The Alpha

@LeeTaylor Flash消息只是在几秒钟后出现并消失的通知。 - user1919937

@SheikhHeera 我什么都没试过，因为我不知道该怎么做。 - user1919937

可能是在Rails中显示flash通知的最佳方法的重复问题。 - Todd A. Jacobs

Answer 1

使用以下代码，您可以使其向下滑动一段时间，等待几秒钟，然后再次向上滑动：

``` $(document).ready(function(){ $(".your-element").slideDown(2000).delay(2000).slideUp(2000); }); ```

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

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

并且请记得在CSS中设置display:none;，这样直到jQuery进入之前，消息才不会出现。

- Eleeist

---

当有消息时，我该如何使其向上滑动？ - user1919937

我猜你需要在服务器端检查并添加适当的类或“data”参数，以便jQuery知道它是否应该进行动画。或者可以通过jQuery检查它是否为空... - Eleeist

如何使用jQuery检查它是否为空？ - user1919937

一些消息是使用erb标签注入的，我使用Ajax保存的那个消息，我有一个update.js.erb文件，其中包含$('.header').append('<div class="message" id="green">Saved</div>');。 - user1919937

看一下这个代码片段：http://jsfiddle.net/RPSwV/。动态添加内容到页面不会影响动画的正确运行。 - Eleeist

Answer 2

我假设你的闪存消息包含在某个可以通过类标识的元素中。你想要找到第一个这样的元素，然后调整滚动位置到该元素的顶部（或其某个偏移量），等待一段时间后再滚动回到顶部。

$(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 });
    }
});

- tvanfosson

---

我在哪里输入类名？ - user1919937

这将在包围您的闪存消息的HTML中。我已经有一段时间没有使用过Ruby了，但类似于<div class="flash-message">@flash[:error]</div>的东西。 - tvanfosson

我可能误解了您的实际需求。这将滚动窗口到错误消息，而不是在顶部打开一个错误消息。那实际上要简单得多。 - tvanfosson

Answer 3

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

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

$("#message").flash_msg(1500);

- Kaleem Nalband

Answer 4

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)
    } 

 }

- Lewiss

---

你能否在你的答案中添加一些评论，以便其他人知道你是如何解决这个问题的？ - Moseleyi

这个解决方案允许您使用任意数量的闪存。像这样调用它： - Lewiss

这样调用：flashRed('选择器'，4)。这将导致选择器的文本闪烁4次。 - Lewiss

技巧是使用计数器来交替颜色。你不能在for循环中使用索引。 - Lewiss

Answer 5

使用JQuery的slideDown()，并在回调中调用slideUp()，同时结合定时器：

$("#message").slideDown(500, function(){
    setTimeout(function(){
$("#message").slideUp(500);  
},5000);
});

- Matanya