我在使用mouseenter / mouseleave触发行为方面存在问题,因为过快地移动目标元素会导致不良行为。我已经看到了几个有类似问题的线程,但似乎都没有解决我的问题。
我创建了一个带有重叠标题的图像网格'字幕。我试图做到这一点,以便当用户将鼠标悬停在网格中的图像上时,标题标题会淡出,并且会有一个'描述'标题显示在其位置。然后在mouseleave上反转,标题标题重新出现。
我已经使用了mouseenter / mouseleave和fadeIn / FadeOut来实现效果 - 当它们在块之间缓慢移动时它可以正常工作,但是如果移动得太快,那么标题就是'和'描述'两个都同时显示。这是我的代码:
$(".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>
&#13;
和JSfiddle在这里 - https://jsfiddle.net/y16nufd7/1/
答案 0 :(得分: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>
答案 1 :(得分:0)
值得注意的是,没有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;
}
&#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;