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をカバーした後、何度も何度も発射されただから私はやったことがちょうどホバーコールバック内のハンドラを削除してから後にのみホバーイベントを再付着されて来ましたcover divが消えました。