当元素之间移动鼠标太快时，jQueryhover问题

我在页面上多次重复以下html：

 outer 
 inner 
  

并有这个jQuery：

 $('.inner').hide(); $('.outer').hover(function(e) { $(this).children('.inner').show("slide", { direction: "right" }, 1000); }, function(e) { $(this).children('.inner').hide("slide", { direction: "right" }, 1000); }); 

正如你在这里看到的： http ： //jsfiddle.net/342q3/15/在div之间缓慢移动鼠标（等待动画完成）达到了一次只显示一个内部div所需的效果。

但是，如果在div之间快速移动鼠标，则所有内部div仍然可见。

我尝试过使用stop（）函数但没有成功。 如何防止内部div保持打开状态？

Answer 1

如果你在开始新动画（滑出）之前停止动画并使用find而不是children （不知道为什么它不适用于children ），它的工作原理如下：

 $('.inner').hide(); $('.outer').hover(function(e) { $(this).find('.inner').stop(true, true).show("slide", { direction: "right" }, 1000); }, function(e) { $(this).find('.inner').stop(true, true).hide("slide", { direction: "right" }, 1000); }); 

http://jsfiddle.net/AVLdW/

Answer 2

尝试用animation()编写代码，这样你就可以随时stop()并设置默认样式。

Answer 3

Animate（）是你想要的function，我用这种函数用这种语法编写了我的导航系统：

 $("your-selecter").hover(function() { $(this).stop().animate({ backgroundPosition: '0 0' }, 600); }, function() { $(this).stop().animate({ backgroundPosition: '0 -100px' }, 600); }); }; 

显然你不想改变你的BG位置，你会在那里称你为滑动function，但这就是这种概念。