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 события срабатывают, когда он переворачивается, так что вы должны определить, была ли мышь перемещается или нет. Это один из способов сделать это.

$(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 в список спонсоровFlip. Это не поддерживается 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 
    }); 
});​