jQuery無限ループ

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イベントがトリガされています...表示されていないので、あなたは、マウスが出て移動したか否かを検出する必要があります。これを行う方法の1つです。

$(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イベントが発生し、無限ループが発生します。私は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 
    }); 
});​