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

You can do something like this:

var $messageDiv = $('#message'); // get the reference of the div
$messageDiv.show().html('message here'); // show and set the message
setTimeout(function(){ $messageDiv.hide().html('');}, 3000); // 3 seconds later, hide
                                                             // and clear the message