鼠标悬停问题与动画持续时间

Question

以下是简单的<int name="color_main_window" value="-13162859" /> 和mouseover功能。

当鼠标在菜单上方时，它会从左侧弹出，离开时会再次隐藏。

问题是，如果鼠标直接输入，它可以正常工作，但是如果我通过它的第一个孩子进入，然后进行鼠标移动，它将需要很长时间才能隐藏。请查看下面的演示以了解我的意思（通过小标签然后鼠标左键输入鼠标，然后通过大盒子输入鼠标然后鼠标左键）

＆＃13;

＆＃13;

mouseleave

＆＃13;

$("#reference").on('mouseover', function() {
  $(this).animate({
    left: 0
  });
});
$("#reference").on('mouseleave', function() {
  $(this).animate({
    left: -115
  });
});

＆＃13;

#reference{
  position: absolute;
  background-Color: white;
  box-Shadow: 0px 0px 10px #888888;
  z-Index: 100000;
  list-Style: none;
  border-Radius: 0px 5px 5px 0px;
  padding: 10px;
  padding-Bottom: 50px;
  min-Height: 300px;
  width: 120px;
  max-Width:120px;
  left: -115px;
}
#reference li:nth-child(1){
  position:relative;
  padding-top:25px;
  padding-left: 3px;
  left:30%;
  height:80px;
  width:25px; background:white;
  border-radius: 0px 15px 15px 0px; float:right;
}

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/cgvsbs9s/

Answer 1

简单，使用mouseenter代替mouseover jsFiddle

原因是mouseover容易从子元素冒泡（再次触发mouseover事件）。由于每个子元素都触发了一个新的mouseover（带有展开动画但未被队列清除），导致：expand 400ms * times every child triggered a mouseover =延长动画时间#reference应该保持扩大。

示例显示mouseover和mouseenter事件之间的差异：

var mouseover = 0, mouseout = 0, mouseenter = 0, mouseleave = 0;
$("#parent").on("mouseover mouseout mouseenter mouseleave", function(e) {
  $("#"+e.type).text(++window[e.type]);
});

*{margin:0;}
#parent{
  padding: 12px;
  background: #0cf;
  display: inline-block;
  margin-right:40px;
}
.child{
  width:50px;
  height:50px;
  background: #f0c;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Mouseover <b id=mouseover>0</b> Mouseout <b id=mouseout>0</b></p>
<p>Mouseenter <b id=mouseenter>0</b> Mouseleave <b id=mouseleave>0</b></p>
<div id="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

使用这些事件总是这对/组合

  

鼠标输入 /鼠标保留
      鼠标结束 /鼠标结束 //很少有人想要使用这两个人

但最重要的是不要忘记一些用户用鼠标快速，
多个悬停可能会结束您的动画，因此您需要使用.stop()

清除动画队列（堆积）

$("#reference").on('mouseenter mouseleave', function(evt) {
  $(this).stop().animate({
    left: evt.type === 'mouseenter' ? 0 : -115
  });
});

<强> Updated jsFiddle

好消息是你根本不需要JS

只需将其添加到您的CSS：

#reference {
  /* other styles... */
  left: -115px;
  transition: 0.4s;
  -webkit-transition: 0.4s;
}
#reference:hover{
  left: 0;
}

<强> CSS-only jsFiddle