使用 jQuery 显示通知的最佳方式答案

【问题标题】：Best ways to display notifications with jQuery使用 jQuery 显示通知的最佳方式
【发布时间】：2009-04-20 20:51:05
【问题描述】：

我有一个简单的 CRUD 表单。

当用户输入或删除记录时，我试图显示一个看起来很酷的成功消息。我在网上看到了很多。

我对 jquery 很陌生。有谁知道任何例子可以说明如何做到这一点？

基本上是一个会慢慢变暗的 div。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您的问题有点含糊，因为“看起来很酷的成功信息”并不多。

但是，如果您有兴趣，通过在这里回答问题，我复制了人们似乎喜欢的 Stackoverflow 的两个“通知”功能的功能：当您获得新徽章时出现在页面顶部的横幅等，以及当操作出现问题时站点周围的红色框。我已经使用与这些类似的技术在我的应用程序中显示成功消息，并且我的客户很喜欢它们。

这些示例非常简单，因为它所做的只是在文档中的某处显示一个 DIV，并根据情况将其淡入淡出。这就是你真正需要开始的一切。

除此之外，如果您是 Mac 粉丝（即使您不是），还有基于 OS X 通知系统的 jQuery Growl 插件。我也非常喜欢使用 BeautyTips 插件在元素附近显示消息，因为气泡非常漂亮且易于设置样式。

【讨论】：

谢谢。你是如何变得如此擅长 jquery 的。我很讨厌 html 和 jquery :( 给新手的任何提示？
练习吧，年轻的学徒。此外，文档非常完整。用它。 :)
刚刚更新了jQuery通知脚本列表here。
here 是另一个在页面顶部显示通知消息

【解决方案2】：

我真的很喜欢jGrowl。这是非常不显眼的，因为消息显示在左下角，用户可以继续做他正在做的任何事情，但他确实从系统中获得了反馈。而且它看起来也很花哨:)。

【讨论】：

我在 2009 年发布了这篇文章，您可能已经注意到了。似乎 jGrowl 仍然可以在 github.com/stanlemon/jGrowl 获得。

【解决方案3】：

只需放入一个新的绝对定位的 div 并使用 fadeOut 函数通过慢速动画为其不透明度设置动画。

类似这样的：

var newDiv = $('div').css({position: 'absolute', left: '100px', top: '100px'}).text('SUCCESS!!!').appendTo($('body'));
newDiv.fadeOut(5000);

【讨论】：

【解决方案4】：

这应该可行：

function showSnazzySuccessMessage(text)
{
    if($("#successMessage").length < 1)
    {
        //If the message div doesn't exist, create it
        $("body").append("<div id='successMessage' style='text-align:center;vertical-align:middle;width:400px;position:absolute;top:200px;left:300px;border:2px solid black;background:green;margin:20px;display:none'>" + text + "</div>");
    }
    else
    {
        //Else, update the text
        $("#successMessage").html(text);
    }
    //Fade message in
    $("#successMessage").show('slow');
    //Fade message out in 5 seconds
    setTimeout('$("#successMessage").hide("slow")',5000);
}

你必须玩弄这种风格才能让它看起来像你想要的那样，但你明白了。

【讨论】：

【解决方案5】：

也许您正在寻找for something like this 或straight fade like this。有a few effects to choose from。

【讨论】：