jQuery 팝업이 빠른 마우스 전환시 깜박임

Question

팝업이 느린 마우스 입력 및 종료 전환에서 부드럽게 작동합니다. 하지만 빠른 전환에서 가끔씩 깜박 거리며 다른 시점에 div 요소 위로 마우스를 올리면 모두 멈 춥니 다. jQuery를에

코드 : http://jsfiddle.net/et65am4c/

방법을 해결하기 위해 다음과 같습니다

var flag = 1; 

jQuery('#hover').mouseenter(function(){ 
    jQuery('#popup').show(); 
}); 

jQuery('#popup').mouseenter(function(){ 
    flag = 0; 
    jQuery('#popup').show(); 
}); 

jQuery('#popup').mouseleave(function(){ 
    flag = 1; 
    jQuery('#popup').hide(); 
}); 

jQuery('#hover').mouseleave(function(){ 
    setTimeout(function() { if (flag == 1) jQuery('#popup').hide();}, 400); 
}); 

는 작업 예제?

미리 감사드립니다.

Answer 1

문제는 실제로 자바 스크립트 문제는 아닙니다. 실행 명령을 실행하고 있습니다. div에서 애니메이션을 적용하면 부드럽게 느껴질 수도 있습니다.

가장 쉬운 방법은 jQuery 애니메이션을 사용하는 것입니다.

var flag = 1; 
jQuery('#hover').mouseenter(function(){ 
    jQuery('#popup').stop().show('fast'); 
}); 

jQuery('#popup').mouseenter(function(){ 
    flag = 0; 
    jQuery('#popup').stop().show('fast'); 
}); 

jQuery('#popup').mouseleave(function(){ 
    flag = 1; 
    jQuery('#popup').stop().hide('fast'); 
}); 

jQuery('#hover').mouseleave(function(){ 
    setTimeout(function() { if (flag == 1) jQuery('#popup').stop().hide('fast');}, 400); 
}); 

하지만 그것을 할 수있는 더 좋은 방법, CSS 전환이 opacity 속성을 사용하여이 될 것입니다.