blinking animations in Jquery using .animation tag
<p>I am using Jquery to animate my text opacity in(from 0 to 1) when you go to any page of my site. Then, on main navigation click, it initializes an animation of the text to fade out, then initializes the link and goes to the next page. However for some reason when you click the main navigation before the text is fully animated in,the text fades out but flickers on full opacity, then loads the link for the next page. I was wondering if someone knew how to correct this, I have the code im using below. I was thinking I need to use queue's somehow but then again im not sure if that would help....Here's the link to my site where you can see it flicker -> www.originalengine.com/test/iindex.html</p>

<p>I start with a 0 opacity in CSS</p>

<pre><code>#AlternateContent{
position: relative;
opacity: 0;
}
</code></pre>

<p>then I fade in the text div</p>

<pre><code>$('#AlternateContent').animate({opacity: '1'},{duration: 2650});
</code></pre>

<p>then this is how I check which nav button was pressed, and animate the fadeout:</p>

<pre><code>if (window.location.pathname === '/test/index.html')

{

$('#AboutButton').bind('click', AboutButton);
$('#PortfolioButton').bind('click', PortfolioButton);
$('#ContactButton').bind('click', ContactButton);

} 

function ContactButton(e) { 

$('#AlternateContent').animate({height: 0},{duration: 2650, queue: false}, 'swing')
.animate({opacity: '0'},{duration: 577, queue: false}, function(){
document.getElementById("AlternateContent").style.opacity=0;
window.location = 'contact.php';

});
}
</code></pre>

<p>Like I said, this works, but I get a flash at the end. Go to my site ( www.originalengine.com/test/iindex.html ) and check it out, if you press the nav items quickly between pages, while fading out, the text will blink 'on' again before going to the next page, I just want it to completely fade out!!</p>

<p>Thanks in advance</p>
