I'm not a big fan of legacy IE. A slight jump is acceptable to me and would have occurred if using the fadeTrans on page enter provided by IE.
But that said, this one will work out smoothly, all the way back to and including IE 6, and is fine for all other browsers supporting opacity:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Fade-In Page Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Style for Fade-In Page script -->
<style type="text/css">
#fadeDiv {
display:none;
width: 100%;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
#fadeDiv {
position: absolute !important;
}
</style>
<![endif]-->
<!-- End Style for Fade-In Page script -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
/* jQuery Fade-In Page script (c)2011 John Davenport Scheuer
As first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This credit must remain for legal use.
*/
$.fn.fademypage = {
speed: 1500, // Edit speed in milliseconds
background: '#fff' // Edit background style (color or color and image) of transition division, should match page background or the predominant color of the page
}
$('head').append('\n<style type="text/css">\n/* Style for Fade-In Page script */\n#fadeDiv ' +
'{\n\tdisplay: block;\n\tposition: fixed;\n\theight: ' + $(window).height() + 'px;'+
'\n\tbackground: ' + $.fn.fademypage.background + ';\n\ttop: 0;\n\tleft: 0;\n}\n/* End Style for Fade-In Page script */\n</style>\n');
jQuery(function($){
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
if($.browser.version < 7){
window.scrollTo(0, 0);
}
@end @*/
$('#fadeDiv').fadeOut($.fn.fademypage.speed);
});
</script>
</head>
<body>
<div id="fadeDiv"></div>
<div>
Welcome to my Homepage!
</div>
</body>
</html>
Notes:
Oh, and we're back to the fadeDiv covering, not containing the page.
More about fading in IE < 9. It used a proprietary filter starting in IE 5 but not really working until IE 5.5. Worked almost as good as generic opacity does today, but predated it. Had problems fading alpha channel .png images (can be overcome in some cases by using IE's alpha image loader filter for those). In IE 6, required background so as not to lose ClearType anti-aliasing of text, later still (IE 7 and 8) even this was of no avail, thus the final jump of opacity to full with anti-aliasing restored for text in IE 8 (7 was left out of this in jQuery for some reason, so the text remains without anti-aliasing, unless the filter is removed). Opera even imitated this flaw for a brief period in its execution of generic opacity. All of which sort of necessitates that for fading text we use a covering element or change the text color, rather than rely upon IE's alpha opacity filter applied to the text element or its parent(s). To make things even more complex, the behavior as regards alpha channel .png images (fixed with IE 7 in general, but not as regards the alpha opacity filter), as well as the exact action on text, changes with each version (as noted above). Finally with IE 9, it acts for the most part like generic opacity but can still have obscure, hard to track down glitches. Generic opacity may be used instead for IE 9 and is the way to go for that browser, avoiding even the vestigial glitches just mentioned.