jquery导航 [英] jquery navigation

问题描述

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

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代码：

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/

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.

推荐答案

您需要调用 .stop（）方法或者你需要检查：animated 伪选择器。

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

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

或

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

.stop（）中的参数表示是否或者不是 fx队列应该被清除，当前动画是否应该实际跳转到最后。

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.

参考： .stop（），：动画

这篇关于jquery导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！