Question

当用户将鼠标悬停在按钮上时，我正试图让菜单淡入淡出。我遇到一个问题，导致菜单开始淡入，然后消失，然后完成淡入。我认为这是由于菜单没有自动弹出而是有300毫秒的淡入淡出的事实。

我的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进来之后一次又一次地发射。所以我做的只是移除了悬停回调中的处理程序，然后仅在封面div消失后才重新附加悬停事件。

jQuery在fadeIn中遇到麻烦

1 个答案: