CODEWITHSUNDEEP
jqueryjquery-ui
Robert
Robert

Reputation: 325

jQuery UI Hover repeating

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

Upvotes: 3

Views: 1028

Answers (3)

Wizard of Ogz
Wizard of Ogz

Reputation: 12643

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.

Upvotes: 4

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

Just posting my version with fix for show('blind').

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

DEMO

Upvotes: 1

lucuma
lucuma

Reputation: 18339

Try this:

$(function() {

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

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

http://jsfiddle.net/lucuma/Md5t5/1/​

Upvotes: 0

Related Questions