У меня есть очень простой сценарий, который перемещает сообщение вниз с верхней части страницы, а затем возвращает его обратно через несколько секунд. Прекрасно работает в FireFox, Chrome и т. Д., Но в IE (с 6 по 8), после того, как слайд-ап завершится, div отображается в полном размере на мгновение, прежде чем исчезнуть, создав неприятную вспышку. Есть идеи как избавиться от этого?
Вот страница полностью:
<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>