javascript - 使用 JQuery，如何使 出现，然后添加一些 html，然后删除 html，然后隐藏 div？

Question

<div id="message" style="display: none">
 <!-- Here I want to place a message. It should be visible for 3 seconds.Then clear the      div to get ready for the next message. -->
</div>

如何使用 JQuery 执行以下操作？

1.在id="message"的div中插入一条消息，并使div可见。 2.使消息可见 3 秒。 3.去除div“消息”的内容。 4.隐藏 div，然后如果需要，从步骤 1 开始。

提前谢谢你。

Answer 1

我是这样做的:

$.msg = function(text, style)
{
    style = style || 'notice';           //<== default style if it's not set

    //create message and show it
    $('<div>')
      .attr('class', style)
      .html(text)
      .fadeIn('fast')
      .insertBefore($('#page-content'))  //<== wherever you want it to show
      .animate({opacity: 1.0}, 3000)     //<== wait 3 sec before fading out
      .fadeOut('slow', function()
      {
        $(this).remove();
      });
};

---

示例:

$.msg('hello world');
$.msg('it worked','success');
$.msg('there was a problem','error');

---

工作原理

1. 创建一个 div 元素
2. 设置样式(这样你就可以改变外观)
3. 设置要显示的 html
4. 开始使消息淡出以使其可见
5. 在你想要的地方插入信息
6. 等待 3 秒
7. 淡出消息
8. 从 DOM 中删除 div——不要弄乱!

---

额外的示例消息样式:

.notice, .success, .error {padding:0.8em;margin:0.77em 0.77em 0 0.77em;border-width:2px;border-style:solid;}
.notice {background-color:#FFF6BF;color:#514721;border-color:#FFD324;}
.success {background-color:#E6EFC2;color:#264409;border-color:#C6D880;}
.error {background-color:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
.error a {color:#8a1f11;}
.notice a {color:#514721;}
.success a {color:#264409;}

```