jQuery顶部绿色提示效果（仿QQ邮箱）

顶部的绿色提示条，像 QQ 邮箱那种，真的是做交互时一个挺实用的小细节。用jQuery实现起来也不难，效果还蛮丝滑的：操作成功后一条绿色提示条在页面顶上轻轻滑出，几秒后自动淡出，用户一眼就能看懂反馈，体验提升不止一点点。

先搞个HTML 结构，你可以加个

样式用CSS控制，主要是颜色、位置、透明度动画这块。用position: fixed固定在顶部，再加个transition，提示弹出来的时候过渡自然，别太生硬：

.top-alert {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

用jQuery的.fadeIn()和.fadeOut()来控制显示隐藏，配合setTimeout实现延时关闭：

$('#saveSettings').click(function() {
  var alertMessage = '设置已成功保存！';
  $('#top-alert').text(alertMessage).stop().fadeIn(500);
  setTimeout(function() {
    $('#top-alert').fadeOut(500, function() {
      $(this).text('');
    });
  }, 2000);
});

别忘了用$(document).ready()包起来，确保 DOM 加载完才能绑定事件：

$(document).ready(function() {
  // 上面那段代码写这儿
});

这个东西用在设置保存、表单提交、操作成功提示都挺合适，轻量不占位，响应也快。要是你项目里缺个小提示工具，不妨试试这个，简单好用。