Twitter 喜欢使用 jquery 的状态消息答案

【问题标题】：Twitter like status message using jqueryTwitter 喜欢使用 jquery 的状态消息
【发布时间】：2010-06-18 07:01:06
【问题描述】：

我正在使用这个 jquery javascript 函数来显示状态消息，

function topBar(message) {
  $("<div />", { 'class': 'topbar', text: message }).hide().prependTo("body")
      .slideDown('fast').delay(4000).slideUp(function() { $(this).remove(); });
}

还有我的 CSS：

.topbar { 
    background: #476275; 
    border-bottom: solid 2px #EEE; 
    padding: 3px 0; 
    text-align: center; 
    color: white;
    font-family:Arial,Helvetica,sans-serif;
    font-size:135%;
    font-weight:bold;
}

我收到了我的状态消息，但它的作用是在正文标记中插入一个 div，而不是我希望消息显示在正文之外（z 索引），就像 twitter 一样（即）只是从顶部流出我的消息并隐藏它......任何建议......希望你得到我的问题......

【问题讨论】：

标签： jquery twitter message status

【解决方案1】：

你想要这样的东西吗？

http://tympanus.net/codrops/2009/10/29/jbar-a-jquery-notification-plugin/

如果您下载插件，您可以通过将第 28 行（用于淡入）和第 39 行（用于淡出）从 fast 修改为 slow 来更改淡入/淡出的速度

例如

第 28 行 _wrap_bar.append(_message_span).append(_remove_cross).hide().insertBefore($('.content')).fadeIn('slow');

第 39 行

$('.jbar').fadeOut('slow',function(){

【讨论】：

@Pandiya Chendur - 查看修改后的答案

【解决方案2】：

你不能在<body>标签之前插入一个项目——你的内容需要在其中，所以你可能应该有一个容器元素包围你可以在消息前添加的所有其他元素

【讨论】：