Jquery navigation

Question

I am creating a simple navigator for the landing page of the site. It directs the user to one of the two sides of the client’s business and basically consists of the fact that the screen is divided in half, when you roll on one side, the other disappears.

My code is:

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 fine, my problem is that you move the cursor left and right over the two halves, the animation quickly gets stuck in a loop. I gave an example here http://jsfiddle.net/4rUAT/

How can I stop this unwanted effect? Thank you very much in advance.

Answer 1

You need to either call the .stop() method, or you need to check the :animated pseudo-selector.

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

or

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

The parameters from .stop() indicate whether to clear the fx queue and whether the current animation should go to completion instantly.

Ref . : . stop () ,: animated

Answer 2

Add .stop () immediately in front of your fadeIn and fadeOut methods, exactly the same

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

In the stop () methods, make sure that all animation is stopped before adding a new animation to the queue for this element.

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