jQuery无限循环

我想在mouseenter上执行一次函数，然后在mouseleave上执行，我希望元素返回到它的状态。jQuery无限循环

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

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

});

我已经尝试了许多解决办法，但我看不出问题是...

来源

2012-02-15 Samuel

使用'hover'代替。这是它的用途。 – mrtsherman 2012-02-15 19:28:56

你可以创建一个jsfiddle吗？很难复制你正在经历的事情。 – 2012-02-15 19:35:01

@ mrtsherman我试过，但我也得到了循环。我试着把其他代码放入悬停（{enter}，{leave}），但我没有管理。 – Samuel 2012-02-15 19:35:48

mouseenter事件被触发时，它翻转，所以你必须要检测鼠标是否已经迁出与否。这是一种方法。

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

在这里看到演示（仅在FF测试）：http://jsfiddle.net/tgg33/7/

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

来源

2012-02-15 19:54:41 Diode

谢谢。它的工作，我理解它;） – Samuel 2012-02-15 22:41:18

你写了什么不能在IE8中工作，你会知道为什么吗？有没有兼容的功能？ – Samuel 2012-02-16 20:36:16

萤火虫的任何错误？ – Diode 2012-02-17 04:39:23

我明白了现在的问题，同时我也明白了为什么这对您来说很难诊断。翻转动画以某种方式干扰悬停事件，从而导致它陷入无限循环。

我将动画元素放入容器中 - 认为监视外部元素的悬停事件可以解决问题。我很惊讶地发现它没有。当内部元素动画时会导致一个mouseout事件触发，这会导致无限循环。我通过向sponserFlip div添加css属性pointer-events: none来解决此问题。这不被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 
    }); 
});

来源

2012-02-15 22:05:28 mrtsherman

谢谢你的时间。我在看到你的消息之前，用上面的帖子解决了它。 – Samuel 2012-02-15 22:48:45

jQuery无限循环

回答

相关问题