jQuery UI Hover repeating

jquery, jquery-ui

Solution

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.

Problem

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

Original source