jquery导航

2023年9月11日 152次阅读

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

我的代码：

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/

如何阻止这种不必要的影响呢？提前谢谢了.

最佳答案 您需要调用.stop()方法,或者需要检查：animated pseudo selector.

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

要么

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

来自.stop()的参数指示是否应该清除fx队列以及当前动画是否应该实际跳转到结尾.

参考：.stop(),:animated

点赞