jQuery无限循环

我想在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);

});

---

我尝试了许多解决方案，但我看不出问题出在哪里…

mouseenter

事件是在鼠标翻转时触发的，因此您必须检测鼠标是否已移出。这是一种方法

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

请参见此处的演示（仅在FF中测试）：

---

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

mouseleave

处理程序。

我现在明白了问题所在，也明白了为什么您很难诊断。翻转动画会以某种方式干扰悬停事件，从而使其陷入无限循环

我将动画元素放在一个容器中，认为监视外部元素的悬停事件可以解决问题。我很惊讶地发现事实并非如此。当内部元素设置动画时，它会引发mouseout事件，这会导致无限循环。我通过将css属性

指针事件：none

添加到sponserFlip div解决了这个问题。IE不支持这一点，但有一些解决方法。如果你想走这条路，请告诉我

---

使用

悬停

。这就是它的用途。你能创建一个JSFIDLE吗？很难复制你所经历的。@t谢尔曼先生，我试过了，但我也得到了这个循环。我试着将else的代码放入悬停（{enter}，{LEFT}）中，但我没有成功。@Interstarr_Coder这是什么JSFIDLE？@Wiglaf:这是一个创建JS/HTML示例的网站。感谢您的时间。在我看到你的帖子之前，我用上面的帖子解决了这个问题。你写的东西在IE8中不起作用，你知道为什么吗？是否有一个func不兼容？不，在firebug中没有错误，它在FF中工作完美。在IE中，它翻转一次，然后所有内容都被阻止。IE也没有给出任何错误

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