Using JQuery, how can I make a <div> appear, then add some html, then remove the html and then hide the 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>

How can I do the following using JQuery ?

1.Insert a message into div with id="message" and make div visible. 2.Make the message visible for 3 seconds. 3.Remove the content of div "message". 4.Hide the div and then if necessary start with step 1.

Thank you in advance.

Answer 1

Here's how I do it:

$.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();
      });
};

---

Examples:

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

---

How it works

1. creates a div element
2. sets the style (so you can change the look)
3. sets the html to show
4. starts fading in the message so it is visible
5. inserts the message where you want it
6. waits 3 seconds
7. fades out the message
8. removes the div from the DOM -- no mess!

---

Bonus Sample Message Styling:

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

```