jquery导航

我正在为网站登陆页面创建一个简单的导航。它将用户引导到客户业务的两侧之一，基本上包括当您滚动到一侧时屏幕被分成两半，另一侧淡出。

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');
}
});

这工作正常，我的问题是，如果您在两半上快速左右移动光标，动画就会陷入循环。我在这里发布了一个例子http://jsfiddle.net/4rUAT/ http://jsfiddle.net/4rUAT/

我怎样才能阻止这种不良影响的发生？提前谢谢了。

您需要调用.stop()方法或者您需要检查:animated伪选择器。

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

or

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

参数来自.stop()表明是否fx queue应该被清除以及当前动画是否应该立即跳到结尾。

Ref.: .stop() http://api.jquery.com/stop/, ：动画 http://api.jquery.com/animated-selector/