I've got an HTML page with a few divs hidden withdisplay:none;that I'd like to be able to.fadeIn()and.fadeOut()replacing one with the other.
I've currently got a link setup that should do just that, here is the Javascript I'm trying:
$('#footer a').click(function() {
$('#content > *').fadeOut('fast', function(){
$('#contact').fadeIn('slow');
});
return false;
});
And here is a quick idea of the HTML layout:
<html>
<head></head>
<body>
<div id="content">
<div id="contact"></div>
<div id="about"></div>
<div id="main"></div>
</div>
</body>
</html>
So, I've got the.fadeIn()as a callback to the.fadeOut(), but I still see a flash of the old content by the time the new content is fading in! Not to mention all kinds of other weirdness such as jQuery not being applied to external HTML that I insert with.load(), but that's for another post I suppose.