jquery navigation

Question

I am creating a simple nav for a site landing page. It directs the user to one of two sides of the clients business and basically consists of the screen being divided in half as you roll over one side the other fades out.

My code:

HTML

<div id="homeNav">
<a href="retail.html" id="retailNav">Retail</a>
<a href="residential.html" id="residentialNav">Retail</a>
<div id="retailHalf"></div>
<div id="residentialFull"></div>
<div id="retailFull"></div>

JQuery

$('#retailNav').bind({
mouseenter: function() {
    $('#residentialFull').fadeOut('slow');
},
mouseleave: function() {
    $('#residentialFull').fadeIn('slow');
}
});
$('#residentialNav').bind({
mouseenter: function() {
    $('#retailHalf').fadeOut('slow');
},
mouseleave: function() {
    $('#retailHalf').fadeIn('slow');
}
});

This works ok my problem is if you move the cursor left and right over the two halves rapidly the animation gets stuck in a loop. I have posted an example here http://jsfiddle.net/4rUAT/

How can I stop this unwanted effect happening? Many thanks in advance.

Answer 1

You need to either invoke the .stop() method or you need check for the :animated pseudo selector.

$('#retailHalf').stop(true,true).fadeOut('slow');

or

$('#retailHalf:not(:animated)').fadeOut('slow');

Parameters from .stop() indicate whether or not the fx queue should get cleared and whether or not the current animation should instantiously jump to the end.

Ref.: .stop(), :animated

Answer 2

Add a .stop() just before your fadeIn and fadeOut methods, just like that

$("#retailHalf").stop().fadeIn('slow');

The stop() methods make sure any animation is stopped before inserted a new animation in the queue for that element.

http://api.jquery.com/stop/