mouseleave 动画之前奇怪的意外延迟

Question

我目前正在尝试使用 .animate() jQuery 函数在悬停一个 div 时创建一个小动画。

如果您查看代码片段，您会发现在鼠标离开 div 和动画启动之间存在非常奇怪的延迟。

肯定是有.animate()功能的东西，因为有一个console.log，当鼠标离开div时，没有任何奇怪的延迟。

我是不是漏掉了什么或者...任何想法都将不胜感激！

谢谢！

$(document).ready(function() {
  $(".square").hover(function() {
      var _this = this;
      $(_this).find(".square-hover").eq(0).animate({
        top: "0px",
      }, 750)
    })
    $(".square").mouseleave(function() {
      var _this = this;
      console.log("mouseleave triggered");
      $(_this).find(".square-hover").eq(0).animate({
        top: "-300px",
      }, 100)
    });
})

.square {
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  height: 200px;
  -webkit-transition-property: background-color;
  -webkit-transition-duration: 0.2s;
  overflow: hidden;
  margin-top: 5px
}

.square-hover{
  position: absolute;
  top: -300px;
  width: 100%;
  height: 100%;
  background-color: rgba(29, 233, 182, 0.85);
}

<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-6 col-xs-offset-3 square">
  <div class="square-hover"></div>
</div>

Answer 1

问题是因为您正在使用 hover 和 mouseleave。 hover 事件处理程序实际上是单独的 mouseenter 和 mouseleave 处理程序 - 因此您实际上附加了 1 mouseenter 和 2 mouseleave。这是你的问题的原因。

如果您更改代码以将两个函数传递给 hover（第一个用于 mouseenter，第二个用于 mouseleave），您的代码有效：

$(".square").hover(function() {
    $(this).find(".square-hover").eq(0).stop(true).animate({
        top: "0px",
    }, 750)
}, function() {
    $(this).find(".square-hover").eq(0).stop(true).animate({
        top: "-300px",
    }, 100)
});

Updated fiddle

还要注意在上面使用 stop(true) 来防止连续事件阻塞动画队列。

mouseleave 动画之前奇怪的意外延迟

Strange unexpected delay before mouseleave animation

jquery

jquery-ui

delay

jquery-animate