jqueryui悬停重复

我有这个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>

使用jqueryui

如果您将鼠标移到“wrap div”上，弹出窗口会向下滑动，当您将鼠标移出时会再次滑开。但是，如果在动画结束之前将鼠标移动到“从上方包裹”或“从包裹到”弹出，它将永远循环（如果等到动画结束，您可以在“包裹”和“弹出”之间自由移动，而没有任何动画，这正是我想要的）

我尝试了

mouseover

，

mouseenter

/

mouseleave

，通过

.not（'：animated'）

进行过滤，在每次调用

show

/

hide

之前调用

.stop（）

，所有这些方法都给出了相同的结果，这让我相信我遗漏了一些基本的东西

有人能给我指一下我在这里错过的东西的方向吗

谢谢

试试这个：

$(function() {

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

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

---

​

悬停回调在

show（'blind'）

和

hide（'blind'）

中不起作用，但在

slideUp（）/slideDown（）

中应该可以正常工作

---

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

编辑：

---

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

只是发布了我的版本，并修复了

show（'blind'）

---

同样的问题。如果将鼠标移到

上，则从上方或左侧可以看到一些内容

行，因此当#pop元素出现时，它会出现在光标下方，您应该可以看到它。看起来

.show（）

正在循环。我无法通过任何操作将其转到无限循环。这似乎是Firefox唯一的问题。请更改

$（“#pop”，this）.slideDown（）到
$（'#pop'）。向下滑动（）。ID选择器不需要
这个
上下文。与
show
和
hide
的无限循环似乎只发生在Firefox上，但这很有效，也很漂亮。谢谢大家!+1用于建议
向下滑动
。我试图弄清楚为什么在动画中调用
mouseenter
。是的，在制作动画时，当你将光标移动到
#pop
内时，它发生在FF12中。当它在动画结束时删除
ui包装
div，导致它再次触发
mouseenter
时，可能会发生这种情况。
$(function() {

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

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

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

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

$(function() {
    var isAnimating = false;
    $('#wrap').hover(function() {
        if (!isAnimating) {
            isAnimating = true;
            $('#pop').show('blind', function () {
                setTimeout(function () { isAnimating = false; }, 100);
            });
        }
    }, function() {
        $('#pop').hide('blind');
    });
});