jquery导航

Question

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

我的代码:

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/

如何阻止这种不良影响的发生？非常感谢。

Answer 1

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

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

或

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

来自.stop()的参数指示是否应清除fx队列以及当前动画是否应立即跳转到末尾。

引用号:.stop() , :animated