jQuery UI Hover repeating

Question

I have this 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>

and this JavaScript:

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

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

JsFiddle link

Using jQuery UI.

If you move your mouse over the #wrap div #pop slides down and slides away again when you mouse out. But if you move your mouse into #wrap from above or move from #wrap into #pop before the animation finishes it loops forever (if you wait till the animation finishes, you can move between #wrap and #pop freely and nothing animates, which is what I want).

I've tried combinations of mouseover, mouseenter/mouseleave, filtering by .not(':animated'), calling .stop() before each call to show/hide, all of which give the same result which leads me to believe I'm missing something fundamental.

Could someone point me in the direction of what I'm missing here?

Thanks

Answer 1

The hover callbacks don't work well with show('blind') and hide('blind'), but they should work OK with slideUp()/slideDown().

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

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

---

Also, I'm not seeing infinite looping, but animations do get queued up. If you move the mouse pointer quickly in and out of #wrap you'll generate a long string of animations.

EDIT:

I was able to get the infinite loop in FF.