jQuery导航答案

【问题标题】：jquery navigationjQuery导航
【发布时间】：2010-09-17 12:33:46
【问题描述】：

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

我的代码：

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/

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

【问题讨论】：

标签： jquery navigation

【解决方案1】：

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

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

或

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

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

参考：.stop()，:animated

【讨论】：

【解决方案2】：

在你的 fadeIn 和 fadeOut 方法之前添加一个 .stop()，就像那样

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

stop() 方法确保在为该元素在队列中插入新动画之前停止任何动画。

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

【讨论】：