当鼠标移动太快时，mouseenter / mouseleave标题交换不起作用

Question

我在使用mouseenter / mouseleave触发行为方面存在问题，因为过快地移动目标元素会导致不良行为。我已经看到了几个有类似问题的线程，但似乎都没有解决我的问题。

我创建了一个带有重叠标题的图像网格＆＃39;字幕。我试图做到这一点，以便当用户将鼠标悬停在网格中的图像上时，标题标题会淡出，并且会有一个＆＃39;描述＆＃39;标题显示在其位置。然后在mouseleave上反转，标题标题重新出现。

我已经使用了mouseenter / mouseleave和fadeIn / FadeOut来实现效果 - 当它们在块之间缓慢移动时它可以正常工作，但是如果移动得太快，那么标题就是＆＃39;和＆＃39;描述＆＃39;两个都同时显示。这是我的代码：

＆＃13;

＆＃13;

$(".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");
  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

和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为我们提供了在悬停时设置转换动画所需的全部内容：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;