Create a Confirmation Message Effect Delay Message like twitter//index.html
<style>
body {
font: normal 85% arial,verdana,tahoma,sans-serif;
color: #000;
margin: 10;
padding: 10;
background: #d3f3f5;
}
#errorMessage, #confirmationMessage {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 70px;
font: normal 1.4em arial;
line-height: 70px;
text-align: center;
color: #000;
background: #fff;
border-bottom: 1px solid #ddd;
filter:alpha(opacity=92);
-moz-opacity: 0.92;
opacity: 0.92;
display: none; /* LEAVE THIS IN*/
}
fieldset {
width: 490px;
margin: 0;
padding: 20px;
background: #f4f4f4;
border: 1px solid #ddd;
}
label {
display: block;
font: bold 1.0em arial,verdana,tahoma,sans-serif;
color: #000;
margin: 0 20px 10px 0;
padding: 0;
clear: left;
}
.textfield, .textarea {
width: 200px;
font: normal 1.0em arial,verdana,tahoma,sans-serif;
color: #000;
margin: 0 0 20px 0;
padding: 5px 6px;
background: #fff;
border: 1px solid #ddd;
}
.textarea {
width: 470px;
height: 110px;
}
.textfield:focus, .textarea:focus {
border: 1px solid #ccc;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function()
{
$(".jquerySubmit").click(function(){
$('#confirmationMessage').delay(400).slideDown(400).delay(3000).slideUp(400);
});
});
</script>
<div id="confirmationMessage">
Thank you. Your message has been sent
</div>
<form method="post" action="">
<fieldset>
<label>Name:</label>
<input type="text" name="Name" class="textfield" />
<label>Comments:</label>
<textarea name="Comments" class="textarea"></textarea>
<a href="#" class="jquerySubmit">SUBMIT </a>
</fieldset>
</form>
Demo
http://dl.dropbox.com/u/7106563/r-ednalan/create-effect-delay-message-like.html
