jquery导航

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

我的代码：

HTML

 Retail Retail 
 
 
 

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 queue以及当前动画是否应该实际跳转到结尾。

参考： .stop（），： 动画

Answer 2

在fadeIn和fadeOut方法之前添加一个.stop（），就像那样

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

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

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