代码之家 › 专栏 › 技术社区 › George Evans

鼠标移动过快时,鼠标指针/鼠标移动标题交换不起作用

mouseleave mouseenter fadeout fadein jquery

George Evans · 技术社区 · 8 年前

我在使用mouseenter/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/

2 回复 | 直到 8 年前

SilverSurfer 8 年前

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

Moob 8 年前

值得注意的是,这也可以在没有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>