Question

我有一个简单的CRUD表单。

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

我对jquery很新。有没有人知道任何可以说明如何做的例子？

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

Answer 1

你的问题有点模糊，因为“看起来很酷的成功信息”并不太合适。

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

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

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

Answer 2

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

Answer 3

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

这样的事情：

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

Answer 4

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

Answer 5

这应该有效：

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

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

使用jQuery显示通知的最佳方法

5 个答案: