I have a very simple script that slides a message down from the top of the page, then slides it back up after a few seconds. Works fine in FireFox, Chrome, etc, but in IE (6 through 8), after the slideUp completes the div appears at full size for just a moment before disappearing, creating a nasty flash. Any ideas on how to get rid of this?
Here's the page in full:
<html>
<head>
<title>Alert Drawer</title>
<script type="text/javascript" src="../jquery.js"></script>
<style>
#drawer {
background-color: yellow;
overflow:visible; position:fixed; left:0; top:0;
text-align:center;
padding:15px; font-size:18px; border-bottom:2px solid #789;
width:100%; display:none; z-index:2;
}
</style>
</head>
<body>
<div id="drawer"></div>
<p>
<br><br><br><br><br><br><br><br>
<a href="#doit">Show the alert drawer!</a>
</p>
</body>
<script type="text/javascript">//<![CDATA[
$(function() {
var drawer = $('#drawer');
$('a').click( function() {
drawer.html("<center>Hey Man!<br>This is a message.</center>");
drawer.slideDown( function() {
drawer.css("backgroundColor", "orange");
setTimeout(function() { drawer.css("backgroundColor", "yellow"); }, 1000);
}
);
setTimeout(function() { drawer.slideUp(); }, 3000);
return false;
});
});
//]]></script>
</html>