在元素之间快速移动鼠标时jQuery悬停问题 [英] jQuery hover problem when moving mouse too quickly between elements

问题描述

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

 < div class =outer> 
 outer 
< div class =inner> 
内
< / div> 
< / div> 
  

并拥有这个jQuery：

  $（ '内。'）隐藏（）; 
 $（'。outer'）。hover（function（e）{
 $（this）.children（'。inner'）。show（slide，{
 direction： （。）。（slide，{
，right）
}，1000）; 
}，function（e）{
 $（this）.children方向：right
}，1000）; 
}）; 
  

正如您在此处所见： http://jsfiddle.net/342q3/15/ 在div之间缓慢移动鼠标（等待动画完成）实现期望的效果，即只显示一个内部div

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

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

开始新的（滑出），并使用 find 而不是 children （不知道为什么它不起作用 children ），它的工作原理如下：

  $（'。inner '）。隐藏（）; 
 $（'。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/

I have the following html repeated many times on a page:

<div class="outer">
    outer
    <div class="inner">
        inner
   </div>
</div>

and have this 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);
});

As you can see here: http://jsfiddle.net/342q3/15/ moving the mouse slowly between the divs (waiting for the animation to complete) achieves the desired effect of displaying only one inner div at a time.

However if you move the mouse quickly between the divs, all the inner divs remain visible.

I've tried using the stop() function but without success. How can I prevent the inner divs from remaining open?

解决方案

If you stop the animation before you start the new one (sliding out) and use find instead of children (no idea why it doesn't work with children), it works as supposed:

$('.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/

这篇关于在元素之间快速移动鼠标时jQuery悬停问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！