Question

我想在mouseenter上执行一次函数，然后在mouseleave上执行该函数我想让元素返回到它的状态。

我的代码产生无限循环。鼠标进入，元素无限翻转，直到我的鼠标离开。

$(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);

});

我尝试了很多解决方案，但我没有看到问题出在哪里......

Answer 1

翻转时会触发

mouseenter事件，因此您必须检测鼠标是否已移出。这是一种方法。

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

在此处查看演示（仅在FF中测试）：http://jsfiddle.net/tgg33/7/

现在只有当鼠标进入时才会翻转div。如果您想在鼠标离开时将其翻转，则必须添加mouseleave处理程序。

Answer 2

我现在看到问题所在，我也明白为什么这对你来说很难诊断。翻转动画会以某种方式干扰悬停事件，从而导致其陷入无限循环。

我将动画元素放在容器中 - 认为监视外部元素的悬停事件可以解决问题。我很惊讶地发现它没有。当内部元素动画时，会导致mouseout事件触发，这会导致无限循环。我通过将css属性pointer-events: none添加到sponserFlip div来解决它。 IE不支持此功能，但有一些解决方法。如果这是你想去的方式，请告诉我。

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
    });
});

jQuery无限循环

2 个答案: