jquery - 使用 jquery 的类似 Twitter 的状态消息

Question

我正在使用这个 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;
}​

我收到了我的状态消息，但它的作用是在 body 标签中插入一个 div，而不是我希望消息显示在 body 之外(z 索引)，就像 Twitter 一样(即，只是从顶部流动我的消息并隐藏)它...任何建议...希望你能回答我的问题..

Answer 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(){