How to stop jQuery fade in fade out/fadeto looping continuously?

Question

I'd like my logo to be invisible after 5 seconds which I have been able to do. I also want the logo to reappear again when the mouse is over my header div and then fade out again if the mouse moves off the header div. The problem is that after placing the mouse over the header div and then removing it, it fades in and out continuously for 3 times, almost like a blinking effect. How can I stop this from happening?

I have tried placing my script in the body and in the head to see if there would be any difference with no success. I also tried placing the functions in separate script tags...

<script type="text/javascript">
    $(document).ready(function () {
        $('#logo').delay(5000).fadeTo( 5000, 0 );
    });
</script>

<script type="text/javascript">
function showLogo()
{
    $('#logo').fadeTo( 2500, 1 );
}
</script>

<script type="text/javascript">
function hideLogo() {
    $('#logo').delay(2500).fadeTo( 2500, 0 );
}
</script>

This is the HTML:

<header id="header" onmouseover="showLogo()" onmouseout="hideLogo()">
<div id="logo">
<img src="images/logo.png">
</div>

Please help! thanks!

Answer 1

You can use the stop() method:

$('#header').hover(function(){
    $('#logo').stop().fadeToggle(2500);
});

Answer 2

I had good luck with the following:

$(document).ready(function () {
    $('#logo').delay(5000).fadeTo( 5000, 0 );
    $('#header').mouseenter(function(e){showLogo();});
    $('#header').mouseleave(function(e){hideLogo();});
});

instead of hooking the handlers up in the header tag.