jQuery UI 悬停重复

Question

我有这个 HTML:

<div>

    <div id="wrap">
        <div id="pop">Hello</div>
        Here is some content
        <br />
        It is several lines long.
        <br />
        This is the end of it.
    </div>

</div>

还有这个 JavaScript:

$(function() {
    $('#wrap').hover(function() {
        $('#pop', $(this)).show('blind');

    }, function() {
        $('#pop', $(this)).hide('blind');
    });
});

JsFiddle link

使用 jQuery UI。

如果您将鼠标移到 #wrap div 上，#pop 就会向下滑动，当您将鼠标移开时，#pop 会再次滑开。但是，如果在动画完成之前将鼠标从上方移至 #wrap 或从 #wrap 移至 #pop，则它会永远循环(如果等到动画结束，则可以在 #wrap 和 #pop 之间自由移动，并且没有任何动画，这是我想要的)。

我尝试了 mouseover、mouseenter/mouseleave 的组合，并按 .not(':animated') 进行过滤，在每次调用 show/hide 之前调用 .stop()，所有这些都给出相同的结果，这让我相信我错过了一些基本的东西。

有人可以指出我在这里缺少的方向吗？

谢谢

Answer 1

悬停回调与 show('blind') 和 hide('blind') 配合使用效果不佳，但与 slideUp 配合使用应该可以正常工作()/slideDown().

$(function() {
    $('#wrap').hover(function() {
        console.log('over');
        $('#pop').slideDown();

    }, function() {
        console.log('out');
        $('#pop').slideUp();
    });
});​

<小时/>

此外，我没有看到无限循环，但动画确实会排队。如果您将鼠标指针快速移入和移出#wrap，您将生成一长串动画。

编辑:

我能够在 FF 中获得无限循环。