Search jQuery

jQuery Forum

on click fade in div

in Using jQuery • 12 years ago

Hi,

I have a number of links with content related to each link. When the user clicks on a link, the current content fades out and the new content (for the clicked link) fades in. This works alright but when the page is first loaded and I click on the about or content link, the hidden content for the clicked link flashes in and out before it fades in correctly. This seems to only happen the first time the links are clicked.

The code is below

<script type="text/javascript">
$(document).ready(function() {
$('#navigation a').click(function(){
var $content = '.'+$(this).attr('class')+'content';
if (!$($content).hasClass('active'))$($content).fadeIn(2000).addClass('active');
$('#wrapper div:not('+$content+')').fadeOut(1000).removeClass('active');
});
$('.portfoliocontent').show().addClass('active');
});
</script>
<style media="screen" type="text/css">
#wrapper{
margin-left:20%;
margin-top:10%;
}
#wrapper div{
position:absolute;
display:none;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li class="portfolio">
<a class="portfolio">Portfolio</a></li>
<li class="contact">
<a class="contact">Contact</a></li>
<li class="about">
<a class="about">About</a></li>
</ul>
</div>
<div id="wrapper">
<div class="portfoliocontent">portfolio</div>
<div class="aboutcontent"><img src="images/guitar.jpg" /></div>
<div class="contactcontent">contact info</div>
</div>