item added - fade out

[bigbadboy]

I've added a sneaky little effect that shows/ hides an "item added" message.
Currently the message shows the div then, after a few seconds, hides it again.
What I want to do is fade out instead of just hide.

You can see it in action here (click 'add to basket' then message appears top right):
http://tinyurl.com/sf-effect

This is the script placed in the head:

<script type="text/javascript">
function hideIt() {
  document.getElementById("message").style.display = "none";
}
setTimeout("hideIt()", 3000); // after 3 sec
</script>

Here is the CSS:

.messageStackSuccess {
	width:100px;
	float:right;
	background-color:#b64926;
	color:#ffff00;
	text-transform:uppercase;
	text-align:center;
	font-size:80%;
	font-weight:bold;
	padding-right:20px;
	}

Thanks in advance.

[bigbadboy]

Forgot to add the code for the actual div that's shown:

<div id="message"><?php
  // Display all header alerts via messageStack:
  if ($messageStack->size('header') > 0) {
    echo $messageStack->output('header');
  }
  if (isset($_GET['error_message']) && zen_not_null($_GET['error_message'])) {
  echo htmlspecialchars(urldecode($_GET['error_message']));
  }
  if (isset($_GET['info_message']) && zen_not_null($_GET['info_message'])) {
   echo htmlspecialchars($_GET['info_message']);
} else {

}
?></div>

[stevesh]

I've always assumed that kind of thing was done with an animated gif, with increasingly faded layers.