I'm using the following code to fadeOut
and fadeIn
content divs on a page (jsfiddle here)...
HTML:
<ul>
<li><a id="indexNav" href="index.html">Home</a></li>
<li><a id="aboutNav" href="about.html">About</a></li>
</ul>
<div id="indexContent">
This is the main page content.
</div>
<div id="aboutContent">
This is the about page content.
</div>
CSS:
ul {
float: left;
display: block;
margin-top: 50px;
margin-left: 0px;
}
ul li {
list-style: none;
display: block;
margin-top: 5px;
}
ul li a {
display: block;
height: 20px;
width: 50px;
margin: 0px;
background: #7d5900;
color: white;
text-decoration: none;
text-align: center;
}
div {
width: 300px;
height: 200px;
margin: auto;
margin-top: 70px;
color: white;
background-color: rgba(0, 36, 125, 0.5);
}
#aboutContent {
display: none;
}
JavaScript:
$('#indexNav').click(function() {
$('#aboutContent').fadeOut('fast');
$('#indexContent').fadeIn('fast');
return false;
});
$('#aboutNav').click(function() {
$('#indexContent').fadeOut('fast');
$('#aboutContent').fadeIn('fast');
return false;
});
As demonstrated in the jsfiddle (at least in Firefox 9.0.1 and IE 9 on Windows 7), when clicking back and forth between the links to show/hide the elements in question, there is a bit of a page-wide flicker as the elements animate. Basically, the div
moves far down the page, which causes a scrollbar to appear and push the div
a little to the left, then it returns to normal when the animation finishes.
Not being an expert in CSS by any means, I've just been sort of tinkering with this to try to achieve a simple fade-out/fade-in effect (using jQuery, naturally). So I'm wondering if there's a more correct way to do this or if I'm making some kind of fundamental mistake in my design that's just not known to me.
Any ideas on what might be causing this flicker and how to correct it?