jQuery가 fadeIn 문제가있는 경우

Question

사용자가 버튼을 가리키면 메뉴가 희미 해 지도록하려고합니다. 나는 페이드 인을 시작한 다음, 사라져서 페이드 인을 끝내는 문제를 겪고있다. 이것은 메뉴가 자동으로 팝업되지 않지만 대신 300 밀리 초의 페이드 인으로 인한 것이라고 생각한다. .

Here is a gif of the issue

내 JS는 다음과 같습니다 :이 문제는 정말 저를 당혹

$(allUsersButton).hover(function(){ 
    $(allUsersDiv).hide().appendTo('#FriendMenu').fadeIn(300); // Menu fade in 
}); 
$(allUsersDiv).attr('id', 'allUsersDiv').bind('mouseleave', function(){ 
    $(this).fadeOut(300);  // Menu fade out 
}); 

. 왜 이것이 일어날 수 있고 좋은 수정이 될지 누가 알 수 있습니까? https://jsfiddle.net/hsoju7q1/1/

Answer 1

var myDiv = document.createElement('div'); 
 
$(myDiv).attr('id', 'myDiv').bind('mouseleave', function() { 
 
    $(this).fadeOut(300, function() { 
 
    $('#butt').hover(myFunc); 
 
    }); 
 
}); 
 

 
$('#butt').hover(myFunc); 
 

 
function myFunc() { 
 
    $(this).off(); 
 
    $(myDiv).hide().appendTo($('#wrap')).fadeIn(300); 
 
}

#wrap { 
 
    height: 200px; 
 
    width: 150px; 
 
    border: 1px solid black; 
 
} 
 
#myDiv { 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 150px; 
 
    left: 0; 
 
    top: 0; 
 
    border: 1px solid red; 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrap"> 
 
    <button id="butt"> 
 
    + 
 
    </button> 
 
</div>

예, 작은 조정 : 여기

편집 *는 바이올린입니다. 마우스를 가져 가면 문제가 발생했습니다.

링크 바이올린 :. https://jsfiddle.net/alokrajiv/hsoju7q1/2/ 초기 호버이 후 또 다시 발사했다

는 사업부가 와서 다루 그때 그냥 가져가 콜백 내에서 핸들러를 제거했고, 그래서 오직 한 후에 가져가 이벤트를 다시 연결 덮개 div는 사라졌다.