javascript - 悬停时的多图像过渡

Question

代码

我有 3 个带有文本的 div (1, 2, 3)。

当用户将鼠标悬停在每个 div 上时，它应该更改图像。

我有一个 1 秒的缓动过渡以使其平滑。

错误

如果您过快地将鼠标悬停在不同的 div 上，过渡会变得不稳定或无法加载。我正在寻找一种解决方案，用户可以在其中快速移动 div，图像将缓慢过渡到最新的 div。提前谢谢你。

CODEPEN 演示

Codepen

现场演示:

img1 = 'url(https://images.unsplash.com/photo-1533273859801-d731381dfe2d)';
img2 = 'url(https://images.unsplash.com/photo-1534939444268-6a9ff2733c32)';
img3 = 'url(https://images.unsplash.com/photo-1534841515798-3d43f5434123)';

$('.p1').hover(function(){
	$('.bg').css({'background-image': img1});
});

$('.p2').hover(function(){
	$('.bg').css({'background-image': img2});
});

$('.p3').hover(function(){
	$('.bg').css({'background-image': img3});
});

body {
  margin: 0;
  font-family: sans-serif;
}

.bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(https://images.unsplash.com/photo-1533273859801-d731381dfe2d) no-repeat center;
  background-size: cover;
  z-index: -1;
  background-color: #989898;
  background-blend-mode: multiply;
  transition: background-image 1s ease
}

.projects {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 16em;
}

.p {
  font-size: 1.2em;
  position: relative;
  padding: 2rem 0;
  color: #fff;
  opacity: 0.5;
  letter-spacing: 4px;
  text-indent: 4px;
  font-weight: 400;
  transition: opacity 0.5s ease;
  text-align: center;
}

.p:hover {
  opacity: 1;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bg"></div>
<div class="projects">
  <div class="p p1">1</div>
  <div class="p p2">2</div>
  <div class="p p3">3</div>
</div>

Answer 1

我建议您使用 mousemove 事件和 .on() 方法，而不是 .hover() 方法。

那，为了能够“缓冲”事件......不遗漏任何一个。

.hover() 方法与定义 mouseenter 和 mouseout 事件处理程序相同(第二个是可选的)。

对于 mousemove 事件，事件正确触发的机会(从用户的 Angular 来看)更高，因为它像机关枪一样发射。

为什么...因为您必须“缓冲”这些事件以等待当前转换结束。

现在，您将事件处理程序附加到公共(public)类 .p 并设置 600 毫秒的“鼠标不活动”超时。在该延迟之后，背景将更新为与最后一个 .p mousemoved 对应的图像。

虽然用户只是像患有帕金森病的人一样移动鼠标，但背景没有任何变化。它仅在 mousemove 停止时更新和动画化。

img1 = 'url(http://ejournalz.com/wp-content/uploads/2017/06/Dog-Care.jpg)';
img2 = 'url(https://www.focusdogtraining.com/wp-content/uploads/2017/10/puppies.jpg)';
img3 = 'url(https://www-tc.pbs.org/wgbh/nova/assets/img/full-size/clever-dog-lab-merl.jpg)';

var movement;
$(".p").on("mousemove",function(e){

  var target = $(e.target);

  clearTimeout(movement);
  movement = setTimeout(function(){
    console.log("User stopped moving... Updating the image.")

    if(target.hasClass("p1")){
      console.log("image #1");
      $('.bg').css({'background-image': img1});
    }
    if(target.hasClass("p2")){
      console.log("image #2");
      $('.bg').css({'background-image': img2});
    }
    if(target.hasClass("p3")){
      console.log("image #3");
      $('.bg').css({'background-image': img3});
    }
  },600);
});

工作演示最好在 CodePen 上查看比在 SO 片段中(遗憾的是)。