当元素之间移动鼠标太快时，jQuery悬停问题

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

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

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

and have this jQuery:

并有这个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.

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

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

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

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

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

3 个解决方案

#1

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:

如果你在开始新动画(滑出)之前停止动画并使用find而不是孩子(不知道为什么它不适用于儿童),它的工作原理如下:

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

#2

try writing code with animation() that way you'll be able to stop() it anytime and set default styles.

尝试用动画()编写代码,这样你就可以随时停止()并设置默认样式。

#3

Animate() is the function you want, I have written my navigation system using this functiong with this kind of syntax:

Animate()是你想要的功能,我用这种函数用这种语法编写了我的导航系统:

$("your-selecter").hover(function() {   

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

Obviously you'd not want to change the BG position in yours, you'd call you slide function in there, but it's this kind of concept.

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

#1