This is a little something I use on several forms i maintain. My form validation functions typically append div's or P's into a hidden container, then I use this function to display the results, one DIV or P at a time, that fade into view in succession. It could obviously serve other purposes.
here is a demo on jsfiddle: http://jsfiddle.net/bcDpS/5/

My form validation creates a basic html structure like so:

Code:
<div id="errorcontainer">
    <div class="eheader">&nbsp;&nbsp;Error Occured!</div>
    <div id="errors">
      <div>Name field is blank.</div>
      <div>Downtime option not selected. </div>
      <div>Start time has not been set.</div>
      <div>End Time has not been set.</div>
    </div>
  </div>
and the css: ( notice I have set display none, not only to the initial container but also the individual div's within #errors)

Code:
#errorcontainer {
	margin-top: 3px;
	display: none;
}
#errors {
}
.eheader {
	padding: 5px;
	background: #FFE1E1;
	font-weight: bold;
	line-height: 1em;
}
#errors div {
	display: none;
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 3px 5px;
	background: #EAEAEA;
	color: #9F0000;
}

the function itself :

Code:
function show_errors() {
	//clear error container div
	$(".eheader").html("&nbsp;&nbsp;Error Occured!")
	var header = "&nbsp;&nbsp;Error Occured!"
	var headers = "&nbsp;&nbsp;Errors Occured!"
	//scroll to top of screen to show errors to user
	scroll(0, 0);
	// delays 200 milliseconds, then shows error container div,
	// then fades in each error in succession, 
	// while also updating the total error count in .eheader
	$("#errorcontainer").delay(200).fadeIn(800, function () {
		$("#errors div").each(function (index) {
			$(this).delay(800 * index).hide(600,function(){ 
			if (index === 0){
				$(".eheader").html(index+1+header);
			}
			else{
				$(".eheader").html(index+1+headers);
			}

			}).fadeIn(800);			
		});
	});
}