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
});

这个问题确实让我很困惑。有谁知道为什么会发生这种情况以及什么是好的解决方案？

编辑* 这是一个 fiddle :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>

是的，小的调整。悬停造成了问题。

fiddle 链接:https://jsfiddle.net/alokrajiv/hsoju7q1/2/

在你的 cover div 进入后，初始悬停会一次又一次地触发。所以我所做的只是删除悬停回调中的处理程序，然后仅在 cover div 消失后重新附加悬停事件。