mouseenter/mouseleave 鼠标移动太快时字幕交换不起作用

Question

我在使用 mouseenter/mouseleave 触发行为时遇到问题，在目标元素上过快移动最多会导致不良行为。我见过一些有类似问题的线程，但 none 似乎解决了我的问题。

我正在创建一个带有重叠 'title' 标题的图像网格。我试图做到这一点，以便当用户将鼠标悬停在网格中的图像上时，标题标题淡出，并在其位置显示 'description' 标题。然后在 mouseleave 上反转，标题标题重新出现。

我使用了 mouseenter / mouseleave 和 fadeIn / FadeOut 来实现效果 - 在块之间缓慢移动时它工作正常，但如果移动太快，'title' 和 'description'两者同时离开显示。这是我的代码：

$(".stage").mouseenter(function() {
  var desc = $(".desc", this);
  var title = $(".title", this);
  title.fadeOut(200, "swing", function() {
    desc.fadeIn(100, "swing");
  });
}).mouseleave(function() {
  var desc = $(".desc", this);
  var title = $(".title", this);
  desc.fadeOut(0, "swing", function() {
    title.fadeIn(0, "swing");
  });
});

.stage {
  height: 200px;
  width: 200px;
  background-color: #1d2452;
  color: white;
  position: relative;
  display: inline-block;
}

.stage > .caption {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.desc {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stage">
  <div class="caption">
    <h2 class="title">Title</h2>
    <p class="desc">Description Text</p>
  </div>
</div>

<div class="stage">
  <div class="caption">
    <h2 class="title">Title</h2>
    <p class="desc">Description Text</p>
  </div>
</div>

<div class="stage">
  <div class="caption">
    <h2 class="title">Title</h2>
    <p class="desc">Description Text</p>
  </div>
</div>

这里是 JSfiddle - https://jsfiddle.net/y16nufd7/1/

Answer 1

使用stop()实现：

$(".stage").mouseenter(function() {
  var desc = $(".desc", this);
  var title = $(".title", this);
  title.stop().fadeOut(200, "swing", function() {
    desc.stop().fadeIn(100, "swing");
  });
}).mouseleave(function() {
  var desc = $(".desc", this);
  var title = $(".title", this);
  desc.stop().fadeOut(0, "swing", function() {
    title.stop().fadeIn(0, "swing");
  });
});

.stage {
  height: 200px;
  width: 200px;
  background-color: #1d2452;
  color: white;
  position: relative;
  display: inline-block;
}

.stage > .caption {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.desc {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stage">
  <div class="caption">
    <h2 class="title">Title</h2>
    <p class="desc">Description Text</p>
  </div>
</div>

<div class="stage">
  <div class="caption">
    <h2 class="title">Title</h2>
    <p class="desc">Description Text</p>
  </div>
</div>

<div class="stage">
  <div class="caption">
    <h2 class="title">Title</h2>
    <p class="desc">Description Text</p>
  </div>
</div>

Answer 2

值得注意的是，不用JS也可以实现。 CSS 为我们提供了悬停动画转换所需的一切：

.stage {
  height: 200px;
  width: 200px;
  background-color: #1d2452;
  color: white;
  position: relative;
  display: inline-block;
}

.title,
.desc {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  top: 50%;
  text-align: center;
  transform: translate(0%, -50%);
}

.desc {
  opacity: 0;
}

.stage:hover .caption .title {
  opacity: 0;
  -webkit-transition: opacity 200ms cubic-bezier(.02, .01, .47, 1);
  -moz-transition: opacity 200ms cubic-bezier(.02, .01, .47, 1);
  -ms-transition: opacity 200ms cubic-bezier(.02, .01, .47, 1);
  -o-transition: opacity 200ms cubic-bezier(.02, .01, .47, 1);
}

.stage:hover .caption .desc {
  opacity: 1;
  -webkit-transition: opacity 100ms cubic-bezier(.02, .01, .47, 1) 200ms;
  -moz-transition: opacity 100ms cubic-bezier(.02, .01, .47, 1) 200ms;
  -ms-transition: opacity 100ms cubic-bezier(.02, .01, .47, 1) 200ms;
  -o-transition: opacity 100ms cubic-bezier(.02, .01, .47, 1) 200ms;
}

<div class="stage">
  <div class="caption">
    <h2 class="title">Title</h2>
    <p class="desc">Description Text</p>
  </div>
</div>

<div class="stage">
  <div class="caption">
    <h2 class="title">Title</h2>
    <p class="desc">Description Text</p>
  </div>
</div>

<div class="stage">
  <div class="caption">
    <h2 class="title">Title</h2>
    <p class="desc">Description Text</p>
  </div>
</div>

mouseenter/mouseleave 鼠标移动太快时字幕交换不起作用

mouseenter/mouseleave caption swap not working when moving mouse too quickly

jquery

mouseenter

mouseleave

fadeout

fadein