mouseenter 和 leave 滑动

Question

我想在鼠标点击最小化元素时向上滑动 div 并在用户离开时向下滑动:

$('#managerpane').mouseenter(function(){
  $('#managerpane').height(300).slideUp();
});

$('#managerpane').mouseleave(function () {
  $('#managerpane').height(60).slideDown();
});


<div id="managerpane" style="position:absolute;left:10px;bottom:0px;z-index:1000;height:60px; background:white; overflow-x: auto; max-width: 76%;" >
    <div>.childs..</div>
</div>

div上下滑动。怎么了？

Answer 1

从下面的演示中可以清楚地看出，根据鼠标指针的位置，可以有多个 mouseenter 和 mouseleave 事件。这就是 div 上下移动 a mouseenter 事件

的原因

$('#managerpane').mouseenter(function(){
  $('#managerpane').height(300).slideUp();
});

$('#managerpane').mouseleave(function () {
  $('#managerpane').height(60).slideDown();
});

#managerpane {
  border:1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div id="managerpane" style="position:absolute;left:10px;bottom:0px;z-index:1000;height:60px; background:white; overflow-x: auto; max-width: 76%;" >
    <div>.childs..</div>
</div>

Answer 2

在 slideUp 过程中，您的 div 高度变为 0（缓慢），这样鼠标指针就不再位于您的 div 上方。在下一次鼠标移动时，会触发离开事件，因此会出现 slideDown，鼠标再次移到您的 div 上方。这会导致多个 mouseenter mouseleave 事件，因此 div 上下波动。

当鼠标移动时触发 mouseenter 事件
身高增加到300
slidesUp 高度动画为 0
将鼠标留在 div
鼠标移动时触发鼠标离开事件
高度=60px;
向下滑动到高度 = 60
鼠标进入div。进入状态 1

当您将鼠标移到此 div 过程上时，过程 1-8 会连续发生。即触发多个上下事件。

如果你想动画高度变化

$('#managerpane').mouseenter(function(){
$(this).animate({height:300},500);
console.log("enter");
});

$('#managerpane').mouseleave(function () {
$(this).animate({height:60},500);
console.log("leave");
});

这很好用。但是，如果您在代码段中记录事件，您会看到多个事件被触发。

mouseenter 和 leave 滑动

mouseenter and leave with slide

html

jquery

dom