jQuery的悬停与淡入麻烦

我试图使菜单淡入淡出当用户将鼠标悬停在按钮英寸我遇到了一个问题，导致菜单开始淡入，然后消失，然后完成淡入。我认为这是由于该菜单不会自动弹出，而是具有300毫秒淡入的事实。jQuery的悬停与淡入麻烦

我的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/

来源

2016-07-25 MarksCode

反刍你在这里重现它在代码亚军或小提琴/ jsbin。这里 – Iceman

yessir你去：https://jsfiddle.net/hsoju7q1/1/ – MarksCode

你可以尝试删除'$（myDiv）.hide（）''只是.hide（）'？之后的问题不会再现。 –

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消失。

来源

2016-07-25 05:04:56 Iceman

jQuery的悬停与淡入麻烦

回答

相关问题