jQuery를 사용하여 마우스 오버시 패널 뒤집기

Flip! 플러그인 또는 similar one을 사용하여 마우스를 뒤집어 넘기고 마우스를 놓으면 뒤집는 간단한 div를 만들려고합니다. 개념 단순 웹 페이지의 증거를 만들었지 만 제대로 작동하지 않는 것 같습니다. 가장 간단한 방법으로 구현 된 경우 (mouseenter : flip(), mouseleave : revertFlip()), div가 마우스를 움직일 때 반복적으로 뒤집습니다. 약간의 작업만으로도 간단하게 작업 할 수 있지만, 애니메이션이 끝나기 전에 마우스를 움직이면 멈추는 문제가 있습니다. 많은 실험을 거친 후, 내 코드는 그렇게 보입니다.jQuery를 사용하여 마우스 오버시 패널 뒤집기

HTML :

<!DOCTYPE html> 
<html> 
    <head> 
     <title> Test </title> 
     <link rel='stylesheet' type='text/css' href='stylesheet.css'/> 
     <script src="jquery.js"></script> 
     <script src='jquery-ui\jquery-1.9.1.js'></script> 
     <script src='jquery-ui\ui\jquery-ui.js'></script> 
     <script src='jquery.flip.js'> </script> 
     <script type='text/javascript' src='script.js'></script> 
    </head> 
    <body> 
     <div class="flipper"><div class="panel">Not flipped!</div></div> 
    </body> 
</html>

CSS :

div {display:inline-block;} 

.panel { 
    width: 200px; 
    height: 80px; 
    text-align: center; 
    color: white; 
    background-color: red; 
    padding-top: 20px; 
    padding-bottom:-20px; 
} 

.flipper{ 
    border: 1px dashed blue; 
}

에서 자바 스크립트 : 현재

$(document).ready(function(){ 
    $('.flipper').mouseenter(function(){ 
     console.log('--Mouse Entered--'); 
     console.log('NOT flipped ' + !($(this).children().hasClass('flipped'))); 
     console.log('NOT flip ' + !($(this).children().hasClass('flip'))); 
     if (!($(this).children().hasClass('flipped')) && !($(this).children().hasClass('flip'))) { 
      console.log('If evaluated') 
      $(this).children().addClass('flip'); 
      console.log('Added flip') 
      $(this).children().flip({ 
       direction: 'lr', 
       content: 'Flipped!', 
       color: 'blue', 
       speed: 1000, 
       onEnd: function(){ 
        console.log('Ended. Removed flip, added flipped'); 
        $(this).children().removeClass('flip'); 
        $(this).children().addClass('flipped'); 
        console.log('Does it have flip ' + $(this).children().hasClass('flip')) 
       } 
      }); 
     }; 
    }); 
    $('.flipper').mouseleave(function(){ 
     console.log('--Mouse left--'); 
     if ($(this).children().hasClass('flipped')) { 
     $(this).children().flip({ 
      direction: 'rl', 
      content: 'Not flipped!', 
      color: 'red', 
      speed: 100 
     }); 
     $(this).children().removeClass('flipped'); 
     console.log('Removed flipped') 
     } 

    }); 
    $('.flipper').click(function(){ 
     console.log('DEBUG classes "' + $(this).children().attr('class') + '"'); 
    }); 
});

, 사업부 FL 한 번 ips, 그 후에 그것을 말하는에도 불구하고, 플립 종류를 제거하는 것을 사절한다.
이 시점에서 나는 매우 혼란스럽고 길을 잃었습니다. 나는 내 div가 뒤집기를 원한다. 도와주세요.

출처

2013-07-28 Legomaniack

mouseout 기능을 실행하기 전에 mouseenter 함수가 완료 될 때까지 기다리는 데 JQuery Timing API을 사용해야합니다.

또는 이와 비슷한 작업을 수행하여 mouseout 기능을 실행하는 데 2 초 정도 대기 할 수 있습니다.

$('.flipper').mouseout(function(){ 
    var t = setTimeout(function() { 
    console.log('--Mouse left--'); 
     if ($('.flipper').children().hasClass('flipped')) { 

      $(this).children().flip({ 
        direction: 'rl', 
        content: 'Not flipped!', 
        color: 'red', 
        speed: 100 
      }); 
      $('.flipper').children().removeClass('flipped'); 
      $('.flipper').children().removeClass('flip'); 
      console.log('Removed flipped') 
     } 
    }, 2000); 
});

출처

2013-07-28 18:41:39

mouseout을 다시 mouseleave로 변경하는 것을 잊었습니다. 여전히 작동해야합니다. 타이밍을 사용하는 방법을 설명해 주시겠습니까? wait()? 나는 그것을 구현하는 방법을 잘 모르겠습니다. – Legomaniack

jQuery를 사용하여 마우스 오버시 패널 뒤집기

답변

관련 문제