CODEWITHSUNDEEP
jquery
Samuel
Samuel

Reputation: 781

jQuery infinite loop

I want to have a function executed once on mouseenter then on mouseleave I would like to have the element to go back to its state.

My code produces an infinite loop. The mouse enters and the element flips infinitely until my mouse leaves.

$(document).ready(function() {
    var flipfunc = function() {
        var elem = $(this);
        if (!elem.data('flipped')) {
            elem.flip({
                direction: 'lr',
                speed: 250,
                onBefore: function() {
                    elem.html(elem.siblings('.sponsorData').html());
                }
            });
            elem.data('flipped', true);
            elem.addClass('sponsorFlipped');
            //elem.unbind('mouseenter', flipfunc);
        }
        else {
            elem.revertFlip();
            // Unsetting the flag:
            elem.data('flipped', false)
            //elem.unbind('mouseleave', rflipfunc);
        }

    }

    $('.sponsorFlip').bind('mouseenter', flipfunc);

    //$('.sponsorFlipped').bind('mouseleave', rflipfunc);

});

I have tried many solution, but I do not see where the issue is...

Upvotes: 2

Views: 674

Answers (2)

mrtsherman
mrtsherman

Reputation: 39902

I see what the problem is now and I also see why this was difficult for you to diagnose. The flip animation somehow interferes with the hover event, thus causing it to fall into an infinite loop.

I placed the animated element inside a container - thinking that monitoring the hover event of the outer element would solve the problem. I was very surprised to find that it didn't. When the inner element animates it causes a mouseout event to fire and this causes your infinite loop. I solved it by adding the css property pointer-events: none to the sponserFlip div. This isn't supported by IE, but there are workarounds. If this is the way you want to go please let me know.

http://jsfiddle.net/SF2MD/

$('.container').hover(function() {
    console.log('hover');
    $(this).children('.sponsorFlip').flip({
        direction: 'lr',
        speed: 250
    });
}, function() {
    $(this).children('.sponsorFlip').flip({
        direction: 'lr',
        speed: 250
    });
});​

Upvotes: 0

Diode
Diode

Reputation: 25165

mouseenter event is triggered when it flips, so you have to detect whether mouse has moved out or not. This is one method to do it.

$(window).bind('mousemove', function(e){
    if($(e.target).hasClass("sponsorFlip")){
        mouseMovedOut = false;
    }else{
        mouseMovedOut = true;
    }
});

see a demo here ( tested only in FF ) : http://jsfiddle.net/tgg33/7/

Now the div gets flipped only when mouse enters. If you want to flip it back when mouse leaves you have to add mouseleave handler.

Upvotes: 1

Related Questions